0

「お問い合わせ」リンクのすぐ右にあるメニューの垂直線を削除してから、メニューバー全体を中央に配置しようとしています。コードは次のとおりです (JSFiddle リンクは一番下にあります)。ご支援いただきありがとうございます:)

HTML:

<body>

<div id="page_wrapper">
<div class="page_padding">

<div id="header">
<div class="inner_padding">

</div>
</div>

<div id="menu_container">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Registration</a></li>
  <li><a href="#">User Programs</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Calendar</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
<div class="spacer"></div>
</div>

</body>

CSS:

body{
     margin:15px 0 15px 0;
     padding:0;
     line-height: 1.7em;
     text-align: center;
     font-family: verdana, arial, sans-serif;
     font-size: 75%;     
}


#page_wrapper {
     width: 890px;
     border:1px solid #8A837D;
     background-color: #FFFFFF;
     margin: 0 auto;
     padding:0;
     text-align: left;
}

#header {
     background: #999E8A url('../img/#.jpg') top right no-repeat;
     height: 135px;
     padding-top:25px;
     margin:0;
}


#content_wrapper {
     float: left;
     width: 100%;
}

.inner_padding {
     margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

.page_padding {
     margin: 15px; /*Margins for inner DIV inside each column (to provide padding)*/
}


#menu_container {
     margin:0;
     padding: 0;
}

#menu_container ul {
     padding-left: 0;
     margin: 0;
     background-color: #CC6600;
     color: White;
     float: left;
     width: 100%;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 1.2em;
     font-weight: bold;
}

#menu_container ul li { display: inline; line-height: 1em;}

#menu_container ul li a {
     padding: 1em 1em 1em 1em;
     background-color: #CC6600;
     color: White;
     text-decoration: none;
     float: left;
     border-right: 1px solid #fff;
}

#menu_container ul li a:hover {
     background-color: #FF9933;
     color: #fff;
}

 .spacer {clear:both;}

>>>> JSFiddle で上記の例を参照してください

4

3 に答える 3

2

このデモを見る

css スタイルが追加されました

#menu_container {
    margin:0;
    padding: 0;
    padding: 0 20px;
    background: #CC6600;
}

#menu_container ul li:last-child a{
    border: none;
}
于 2013-10-28T06:41:00.103 に答える
0

およびでCSS ルールdisplay: tableを使用できます。これにより、メニューが水平スペースに完全に収まります。を削除し、タグに追加しました。<ul>display: table-cell<li>display: inlinedisplay: block<a>

:first-child境界線を削除するには、または:last-childCSS セレクターを使用できます。:first-child を使用してから、 の左側に境界線を配置することをお勧めし<a>ます。これは、:first-child がより多くのブラウザーでサポートされているためです。

ここにフィドルがあります：http://jsfiddle.net/davidpauljunior/94PsT/2/

于 2013-10-28T06:43:57.470 に答える
0 
edit css like this

デモ: http://jsfiddle.net/94PsT/4/

  #menu_container ul {
padding-left: 0;
margin: 0 auto;
background-color: #CC6600;
color: White;
width:92%;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
 }

#menu_container ul li:last-child a {
padding: 1em 1em 1em 1em;
background-color: #CC6600;
color: White;
text-decoration: none;
float: left;
border-right: none;
 }
于 2013-10-28T07:46:03.120 に答える