4

メニュー内のアイテムを中央揃えにするにはどうすればよいですか？（lis）ulWebサイトのページ内でメニュー（）を中央に配置できましたが、メニューの実際の項目（Home、Aboutな​​ど）を中央に配置できません。

ここで私のHTML/CSSを編集できます：http：//jsfiddle.net/66reH/
結果を表示するには

CSS / HTML：

#nav {
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #fff;
	margin-left:auto;
	margin-right:auto;
	background-color: #eee;
	padding: 5px;
	height: 38px;
	width: 913px;
	font-weight: bold;
	border-style:solid;
	border-width:4px;
	border-color: #000;
}
#nav ul {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 170px;
}
#nav ul li {
	list-style-type: none;
	text-align: center;
	float: left;
	margin: 0px;
}
#nav ul li a {
	text-decoration: none;
	color: #000;
	text-align: center;
	display: block;
	padding: 10px;
	margin: 0px;
}
#nav ul li a:hover {
	color: #CD0000;
}
<div id="nav" align="center">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">TOUR</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="#">PRESS</a></li>
    <li><a href="#">PHILANTHROPY</a></li>
    <li><a href="#">JOBS</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

4

2 に答える 2

5
  • #navdivのalignプロパティを削除します
  • セレクターCSStext-align: center;に追加#nav
  • セレクターCSSのmargin-leftプロパティを削除しますul
  • セレクターCSSに'text-align: center;を追加ul
  • セレクターCSSのfloat: left;プロパティを削除しますli
  • セレクターCSSdisplay: inline-block;に追加li

そこには中央のメニューがありませんでした。CSSのULの左側に170pxを追加しただけなので、中央に表示されます。しかし、そうではありませんでした。

デモはこちら

于 2012-11-25T02:14:55.830 に答える
0

CSS / HTML

#nav {
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #fff;
    margin-left:auto;
    margin-right:auto;
    background-color: #eee;
    padding: 5px;
    height: 38px;
    width: 913px;
    font-weight: bold;
    border-style:solid;
    border-width:4px;
    border-color: #000;
}
#nav ul {
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#nav ul li {
    list-style-type: none;
    text-align: center;
    float: left;
    margin: 0px;
}
#nav ul li a {
    text-decoration: none;
    color: #000;
    text-align: center;
    display: block;
    padding: 10px;
    margin: 0px;
}
#nav ul li a:hover {
    color: #CD0000;
}
.outer {
    float: right;
    right: 50%;
    position: relative;
}
.inner {
    float: right;
    right: -50%;
    position: relative;
}
.clearboth {
    clear:both;
}
<div id="nav" align="center">
         
  <div class="outer">
    <ul class="inner">
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">TOUR</a></li>
      <li><a href="#">NEWS</a></li>
      <li><a href="#">PRESS</a></li>
      <li><a href="#">PHILANTHROPY</a></li>
      <li><a href="#">JOBS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </div>
  <div class="clearboth"></div>
</div>

デモ

センタリングの詳細：

divの中央揃え

于 2012-11-25T02:23:33.937 に答える