2012-02-22 5 views
1

私はしばらく何かについていました。私のウェブサイトのメニューを広げて、そこに座っているディビジョンを埋める方法は?

私は編集したcss playのメニューを持っています。私はそれを私の本体のdiv(幅980px)で全幅にし、スペースを埋めるためにメニュー見出しを広げたいと思っています。

現在のところ、それはちょうど中央にあり、メニューの両側に隙間があります。

私はそれをここに置いて、あなたは私が何を意味するか見ることができます! http://nugrafik.com/menu_test_delete.html

私はマージン/パディングなどで手を出すことで不正行為を試みましたが、それほど正しくは見えません。

誰でも手伝いできますか?

CSS:

.menu {display:inline-block;} 
.menu {display:inline;} 
.holder {display:table;} 

.menu { 
display:table-row; 
padding:0; 
margin:0; 
list-style-type:none; 
white-space:nowrap; 
font-family: Helvetica, Verdana, Tahoma; 
color: #333333; 
} 
.menu li {display:inline;} 
.menu a, .menu a:visited { 
display:block; 
float:right; 
padding:3px 11px; 
color:#666666; 
background:#e0e0e0; 
border:1px solid #fff; 
text-decoration:none; 
} 
.menu a:hover { 
color:#fff; 
background:#c1d045; 
} 

#wrapper2 { 
text-align:center; 
font-family: Helvetica, Verdana, Tahoma; 
color: #333333; 
} 
#wrapper2 .holder { 
margin-top: 0; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto; 
text-align: center; 
}  
#mainbody { 
background-color: #66CCFF; 
height: 400px; 
width: 980px; 
margin-right: auto; 
margin-left: auto; 
} 

はHTML:

<body> 
<div id="mainbody"> 
<div id="wrapper2"> 
<div class="holder"> 
<ul class="menu"> 
<li><a href="#nogo">Contact</a></li> 
<li><a href="#nogo">Links</a></li> 
<li><a href="#nogo">Scholarships</a></li> 
<li><a href="#nogo">Organizers</a></li> 
<li><a href="#nogo">Abstracts</a></li> 
<li><a href="#nogo">Accommodation</a></li> 
<li><a href="#nogo">Venue</a></li> 
<li><a href="#nogo">Scientific Program</a></li> 
<li><a href="#nogo">Home</a></li> 
</ul> 
</div> 
</div> 
</div> 
</body> 
+0

質問タイトルの「CSS/HTMLヘルプお願い」は不要です。タグ付けは、コミュニティに質問が関連していることを教えてくれるので、SOコミュニティが協力してくれます:)あなたの署名を編集したので、自動的にあなたの投稿に署名します。 – supertopi

答えて

1

があなたのCSSでこれを書く:

#wrapper2 { 
    background:#E0E0E0; 
    overflow: hidden; 
    text-align: center; 
} 
+0

親愛なるSandeep、ありがとうございます - それはメニューの灰色を追加しますが、980pxのスペースにメニューを伸ばしません。ここに変更をアップロードしました:http://nugrafik.com/menu_test_delete.html – user1225529

+0

メニュー自体を980ピクセル幅に広げることは可能ですか? – user1225529

2

1).holderdisplay: table;を脱い。

2).menu

3に設定したすべてのdisplaydisplay: table-row;.menuで(より良いテイクを脱いで)display: inline;.menu liに離陸し、それfloat: left; width: 11.11%;に追加します。 11.11%は100/9で、すべてのアイテムの幅が同じになります。それ以外の場合は、浮動小数点数を浮動小数点数にして表示するか、またはインラインで表示するので、必要な幅だけ使用し、メニューは100%の幅にならないため、各項目の幅を手動で設定します。

1

sandeepさんのお薦めを適用した後、左/右パディングをもう少し増やしてください(16pxは私の右に近いように見えます...あなたが今持っている11pxよりも近いです)。そして、左端と右端のメニュー左と右の罫線をそれぞれ削除して、左端のメニュー項目には境界線が残っておらず、一番右のメニュー項目には境界線がありません。

メニュー項目の計算された流体幅では、これはおそらく正確ではありませんが、見たように均等に間隔を置くことはできず、左右のメニュー項目は他のメニュー項目よりわずかに大きくなります。とにかく気づくのはおそらく十分ではありません。

編集:私は11.1%の幅を考えていませんでした。そうすれば、全幅を埋めることができます。

+0

こんにちは、ありがとうございました。それは私がそれを達成することを期待していたものではありませんでしたが、これは私が望んでいたものです。ありがとうございました!! – user1225529

0

残念ながら、これはCSSでは不可能です。たとえそれが正しいとしても、小さな変化のために崩壊する可能性があります。したがって、それが絶対的であることが分かっていない限り、それは良い習慣とはみなされません(これは決してほとんどありません)。

代わりに、メニュー項目を左に浮かして枠線を削除してください。とにかくアライメントを達成した場合よりもはるかに良く見えます。メニューはもっと柔軟になります。たぶんあまりドラマチックでないホバー状態も試してみてください。がんばろう。

+0

ありがとう!私の最終結果:http://nugrafik.com/menu_test_delete.html – user1225529

関連する問題