0

サイトのナビゲーションメニューを幅に均等に広げたいのですが。これが私が達成しようとしていることの例です。リンクがどのように等間隔に配置され、ナビゲーションバーの幅全体に伸びているかに注目してください。

これを実現するためにどのコードを使用すればよいか正確にはわかりません。margin：autoを試しましたが、うまくいかなかったようです。

これが私が持っているCSSです：

.mainNav{ 
  height:30px; 
  padding-bottom:0px; 
  margin:0 !important;
  position: relative; 
  border-top: 1px #d5d5d5 solid;
  border-bottom: 1px #d5d5d5 solid;
}
.mainNav a { 
  font-size:16px; 
  -webkit-transition:none; 
  -moz-transition:none; 
  -o-transition:none; 
  transition:none;
  position: relative;              
}   
.mainNav ul { 
  list-style-type: none; 
  list-style-image: none; 
}
.mainNav li {
  float:left;                   
  margin: 0 auto;
  position: relative; 
  list-style-type: none; 
  list-style-image: none; 
}   
.mainNav li a { 
  text-transform:uppercase; 
  padding:0 0 0 36px; 
  display:block; 
  padding-bottom:13px;  
}
.mainNav li ul { 
  display: none; 
  margin:0 !important; 
}
.mainNav li:hover > ul, .mainNav li.hover > ul { 
  display: block; 
  position: absolute; 
  top: 35px; 
  left: 0; 
  z-index: 1000; 
  width: 180px; 
}
.mainNav li  > ul { 
  height:auto;  
  width: auto; 
  background: #fff; 
  border:1px solid #efefef; 
  padding:0; 
}
.mainNav li  > ul li {  
  width:180px; 
  padding: 0; 
  position: relative; 
  height:35px; 
  border-bottom:1px solid #efefef; 
}   
.mainNav li  > ul li:last-child{  
  border-bottom:none; 
}
.mainNav li  > ul li a { 
  text-transform:none; 
  height:22px; 
  padding: 5px 10px 0px 15px; 
  text-align: left;  
  font-size: 13px; 
  line-height:25px; 
  color:#333; 
}
.mainNav li  > ul li a:hover { 
  border:none; 
}
.mainNav li ul li:hover > ul, .mainNav li ul li.hover > ul { 
  display: block; 
  position: absolute; 
  top:0; 
  left: 180px; 
  z-index: 0; 
  width: 180px; 
}
4

2 に答える 2

1

javascriptをオフにして、複製したいWordPressテーマをリロードすると、スタイリングが壊れていることに気付くでしょう。

これは、リストアイテムに均等に配置するためのマージンの設定が、javascriptを使用して計算され、適用されるためです。

リストアイテムのスタイルを設定するJavaScriptソリューションを作成するか、リストアイテムの幅をハードコーディングすることで簡単に修正できます。例：

CSSの現在のブロックを変更します。

.mainNav li a { 
  text-transform:uppercase; 
  padding:0 0 0 36px; 
  display:block; 
  padding-bottom:13px;  
}

次のように：

.mainNav li a { 
  text-transform:uppercase; 
  text-align: center; /*added*/
  width: 117px; /*added*/
  padding:0; /*edited*/
  display:block; 
  /*padding-bottom:13px;*/ /*removed*/
}
于 2012-06-01T18:12:54.870 に答える
0

それは私に固定されているように見えます。Firefoxで見られる適用されたスタイルを使用した、Firefoxでのサイトのスクリーンショット：

ここに画像の説明を入力してください

于 2012-06-02T11:40:03.953 に答える