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

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

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

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

2015.09.18 12:35:11 조회 5635 (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

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

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

회원로그인