CSS Horizontal Float 정렬

간단한 메뉴가있어서 CSS를 사용하여 페이지 중앙에 배치하고 싶습니다. 여기 http://jsfiddle.net/kSV4K/4/CSS Horizontal Float 정렬

의 코드, CSS : 다음 메뉴의

ul#menu { margin:0; padding:0; list-style-type:none; } 
ul#menu li { position:relative; float:left; border-bottom:4px solid #efefef; margin-right: 0px; padding-right: 0px; padding-bottom: 5px;} 
ul#menu .current { border-bottom:4px solid #3d496a;} 
ul#menu li:hover { border-bottom:4px solid #3d496a;} 
ul#menu li a { padding:2px 2px; text-decoration:none; font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;} 
ul#menu li a:hover { color:#8895b8; border:none; }

HTML :

<ul id="menu"> 
    <li class="current"><a href="#" data-id="div1">Description</a></li> 
    <li><a href="#" data-id="div2">Shipping and payment</a></li> 
    <li><a href="#" data-id="div3">Returns</a></li> 
    <li><a href="#" data-id="div4">Feedback</a></li> 
</ul>

어떤 제안이? 대신에 플로트

출처

2013-06-12 user2401856

나는 당신의 바이올린에 더 많은 문맥을 넣기를 강력하게 조언한다. 컨테이너와 주변 요소에 적용된 스타일이 이것의 위치에 영향을 줄 수있다. 또한 ul # 메뉴는 잘못된 선택입니다. 페이지에 ID "menu"가있는 항목이 하나만 있어야하므로 ul을 붙일 필요가 없습니다. –

는 li 요소 인라인 블록을 사용하고 그들이 ul 블록 text-align: center 중심을인가 할 수있다.

ul#menu { 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    text-align: center; 
} 
ul#menu li { 
    display: inline-block; 
    border-bottom:4px solid #efefef; 
    margin-right: 15px; 
    padding-right: 20px; 
    padding-bottom: 5px; 
}

참조 바이올린 : http://jsfiddle.net/audetwebdesign/kSV4K/3/

출처

2013-06-12 15:07:11

대단히 감사합니다. p – user2401856

당신은 또한 메뉴로 약간의 폭을 추가하고 여기에 중심을 margin: 0 auto;을 적용 할 수 있습니다 내가 또한 메뉴가 <nav> 태그 나 <div> 안에 포함 할 것을 권장 바이올린 http://jsfiddle.net/xtatanx/swT4F/입니다.

출처

2013-06-12 15:09:51

CSS Horizontal Float 정렬

답변

관련 문제