그누보드 QA - css 리스트 가로정렬되려면 어디를 수정해야...

css 리스트 가로정렬되려면 어디를 수정해야...

페가수스 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015.09.18 12:35:11 조회 5560 (178.♡.♡.236)

본문

상단메뉴 마우스 오버시

http://www.jungtomall.com/html/newpage.html?code=7

위처럼 적용되었습니다.

페이지에 적용하기위해

http://www.jungtomall.com/html/newpage.html?code=6

위처럼 적용하니 메뉴요소들이 수직정렬되어 5행2렬로 리스트가 정렬되지 않습니다.

div의 위치도 문제가 되는듯한데 ...이소스

어떻게 수정해야 할까요?

<head>

<title>정토불교용품백화점:: 정토몰에 오신것을 환영합니다.</title>

body { background: url(/design/jungtomall/main_2014/topmenu_bg.gif) repeat-x; }

</style>

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

function go_check()

{

var status = "width=500 height=450 menubar=no,scrollbars=no,resizable=no,status=no";

var obj = window.open('', 'kcp_pop', status);

document.shop_check.method = "post";

document.shop_check.target = "kcp_pop";

document.shop_check.action = "http://admin.kcp.co.kr/Modules/escrow/kcp_pop.jsp";

document.shop_check.submit();

}

</script>

</head>

<tr>

<tr>

<tr>

</tr>

<tr>

</tr>

</table>

<tr>

<tr>

<td width="340">[LOGINTYPEZ]</td>

<tr>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<tr>

</tr>

</form>

</table></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table>

@import url("http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css");

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

/* BASIC css start */@font-face{

}

@font-face{

font-family:'Exotic350BTDemiBold';src:url('/design/jungtomall/font/Exotic350BTDemiBold.eot');src:url('/design/jungtomall/font/Exotic350BTDemiBold.eot') format('embedded-opentype'),url('/design/jungtomall/font/Exotic350BTDemiBold.svg#Exotic350BTDemiBold') format('svg')}

@font-face{

font-family:'TrajanProBold';src:url('/design/jungtomall/font/TrajanProBold.eot');src:url('/design/jungtomall/font/TrajanProBold.eot') format('embedded-opentype'),url('/design/jungtomall/font/TrajanProBold.svg#TrajanProBold') format('svg')}

/* Base styles */

/*body{margin:0;}*/

/* header {height: 50px; } */

ul{margin:0;padding:0;list-style:none}

a{text-decoration:none}

.container{max-width:1000px;margin:auto}

/* Navigation styles */

/*header{position:relative} */

.wrap-mainnav {position:relative;}

.main-nav-menu{position:relative;z-index:999;border-bottom:1px solid #909090}

.main-nav-list{display:block;position:relative;width:1000px;font-size:14px;text-align:justify;text-decoration:none}

.main-nav-list li{display:inline-block; padding:22px 0 0 25px}

.main-nav-link{display:block;height:38px;line-height:38px;font-weight:bold;color:#000; padding:0}

.main-nav-link:hover{background-color:#9dc400}

.main-nav-drop .drop-menu{position:absolute;top:-585px;z-index:5;width:100%;height:400px;box-shadow:0 2px 5px #aaa;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:top .5s ease;transition:top .5s ease}

.main-nav-drop .drop-menu.active{top:0}

.main-nav-drop .drop-menu[data-nav-item*=total-menu]{border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu01]{border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu02]{border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu03]{border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu04]{border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu05]{height:280px;border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu06]{height:280px;border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu07]{height:280px;border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu08]{height:280px;border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu09]{height:280px;border-bottom:1px solid #909090;background-color:#fff}

.main-nav-drop .drop-menu[data-nav-item*=menu10]{height:280px;border-bottom:1px solid #909090;background-color:#fff}

.no-csstransitions .main-nav-inverse-drop .drop-menu{display:none;top:0;opacity:1}

/* all menu */

/*.main-nav-drop .drop-menu .container{position:relative}*/

.main-nav-drop .drop-menu .container .jm01{margin-top:50px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-size:12px;text-decoration:none}

.main-nav-drop .drop-menu .container .jm01 span{display:inline-block;width:200px;margin:0;color:#333;text-decoration:none;vertical-align:text-top}

.main-nav-drop .drop-menu .container .jm01 span h4{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm01 span h4 a{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm01 span li a{color:#666;text-decoration:none}

.main-nav-drop .drop-menu .container .jm01 span li a:hover{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm02{margin-top:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-size:12px;text-decoration:none}

.main-nav-drop .drop-menu .container .jm02 span{display:inline-block;width:200px;margin:0;color:#333;text-decoration:none;vertical-align:text-top}

.main-nav-drop .drop-menu .container .jm02 span h4{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm02 span h4 a{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm02 span li a{color:#666;text-decoration:none}

.main-nav-drop .drop-menu .container .jm02 span li a:hover{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm03{margin-top:-80px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;font-size:12px;text-decoration:none}

.main-nav-drop .drop-menu .container .jm03 span{display:inline-block;width:200px;margin:0;color:#333;text-decoration:none;vertical-align:text-top}

.main-nav-drop .drop-menu .container .jm03 span h4{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm03 span h4 a{color:#14c2c9;text-decoration:none}

.main-nav-drop .drop-menu .container .jm03 span li a{color:#666;text-decoration:none}

.main-nav-drop .drop-menu .container .jm03 span li a:hover{color:#14c2c9;text-decoration:none}

</style>

<!--<div class="wrap2">

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</ul></span>

</ul></span>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=002&mcode=002&type=X">동자동녀복</a></li>

<li><a href="/shop/shopbrand.html?xcode=002&mcode=003&type=X">동자동녀용품</a></li>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=007&type=X&mcode=001">초파일용품</a></li>

<li><a href="/shop/shopbrand.html?xcode=007&type=X&mcode=003">행사소모품</a></li>

</ul></span>

</div>

</ul></span>

</ul></span>

</ul></span>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=005&type=X&mcode=003">부적관련용품</a></li>

</ul></span>

</div>

</div>

</li>

<li><a href="/shop/shopbrand.html?xcode=001&type=X&mcode=001&scode=005">식물성양초</a></li>

</ul></span>

</ul></span>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=001&type=X&mcode=007&scode=001">자연산침향합장주</a></li>

<li><a href="/shop/shopbrand.html?xcode=001&type=X&mcode=007&scode=002">조림수침향합장주</a></li>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=001&mcode=006&scode=007&type=X">원석합장주</a></li>

<li><a href="/shop/shopbrand.html?xcode=001&mcode=006&scode=008&type=X">목재합장주</a></li>

</ul></span>

</div>

<li><a href="/shop/shopbrand.html?xcode=001&mcode=004&scode=004&type=X">고급옥제품</a></li>

</ul></span>

</div>

</div>

</li>

</ul></span>

</ul></span>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=004&type=X&mcode=012&scode=002">옻칠조각목탁</a></li>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=004&mcode=001&scode=002&type=X">LED전기꽃</a></li>

</ul></span>

</div>

</ul></span>

</div>

</div>

</li>

<li><a href="/shop/shopbrand.html?xcode=003&type=X&mcode=007&scode=001">칠보부처님</a></li>

<li><a href="/shop/shopbrand.html?xcode=003&type=X&mcode=007&scode=002">칠보신령님</a></li>

<li><a href="/shop/shopbrand.html?xcode=003&type=X&mcode=007&scode=003">칠보동자동녀</a></li>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=003&mcode=001&scode=001&type=X">석가모니불</a></li>

<li><a href="/shop/shopbrand.html?xcode=003&mcode=001&scode=005&type=X">관세음보살</a></li>

</ul></span>

</ul></span>

<li><a href="/shop/shopbrand.html?xcode=003&type=X&mcode=003&scode=012">후불탱화(사찰)</a

#css3 #display #div #span

답변 2

왕계란 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-09-18 12:49:41 1.♡.♡.107

.jm01 ul { text-align:left; }

이렇게 해 보세요.

페가수스 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-09-18 16:04:45 178.♡.♡.72

<span></span>때문에 안 나왔던 거군요. 태그가 정렬하면서 자동생성되어 고생했습니다.

답변을 작성하시기 전에 로그인 해주세요.

css 리스트 가로정렬되려면 어디를 수정해야...

QA

css 리스트 가로정렬되려면 어디를 수정해야...

관련링크

본문

이 질문에 댓글 쓰기 :

답변 2

왕계란 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

페가수스 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

회원로그인