0

サイズが一致する場合、ナビゲーションバーのサイズを変更するたびに、下部に1行追加し続けます。連絡先タブの後の小さなスペースを削除するのを手伝ってくれる人はいますか? 前もって感謝します。これは結果のリンクです

ここに画像の説明を入力

私のコードはこのobj.htmlです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="obj1.css">
<title>Objective 1</title>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navbutton"><a href="">About Us</a></li>
<li class="navbutton"><a href="">Our Team</a></li>
<li class="navbutton"><a href="">Education</a></li>
<li class="navbutton"><a href="">Health Care</a></li>
<li class="navbutton"><a href="">Advertising</a></li>
<li class="navbutton"><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>

obj1.css

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul {
    display: inline-block;
    list-style-type:none;
    margin:0;
    padding:0;
}

li {
    float: left;
}

.header{
width: 900px;
height: 385px;
background-image: url(header.jpg);
}
.navbutton {
position: relative;
top: 310px;
width: 145px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-image: url(link.png);
}

.navbutton a {
text-decoration:none;
}

.navbutton:hover{
background-image: url(linkselected.png);
}
4

4 に答える 4

0

ここで2つの問題が発生しています。まず、実際には必要のないマージンが適用されています。これを修正しても、ヘッダーの幅によって望ましくない「スペース」が表示されます。

http://tinker.io/0191d/2

次の変更を含めます。

.header {
    width: 895px; /* or modify the width of the button elements */
}

ul {
    margin: 0 0 0 -5px;
}

.navbutton {
    margin-left: 5px;
    margin-right: 0;
}

セレクターを使用:last-childして最後の要素のマージンを削除できますが、実際に要素を折り返す必要がある場合にはうまく機能しません ( http://codepen.io/cimmanon/pen/dwbHiを参照)。また、IE8 ではサポートされていません。

于 2013-04-14T13:17:42.737 に答える
0

流動的なレイアウト ソリューションについては、このjsfiddleを確認してください。

このソリューションでは、、、display: tableおよびdisplay: table-rowプロパティdisplay: table-cell値を使用します。

マークアップ

 <div class="header">
     <div class="nav">
        <ul>
           <li class="navbutton">
              <a href="">About Us</a>
           </li>
           <li class="navbutton">
              <a href="">Our Team</a>
           </li>
           <li class="navbutton">
              <a href="">Education</a>
           </li>
           <li class="navbutton">
              <a href="">Health Care</a>
           </li>
           <li class="navbutton">
              <a href="">Advertising</a>
           </li>
           <li class="navbutton">
              <a href="">Contact Us</a>
           </li>
        </ul>
     </div>
  </div>

CSS

     body{
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
     }

     .nav ul{
        display: table-row;
        list-style-type: none;
        margin: 0;
        padding: 0;
     }

     .header{
        width: 900px;
        height: 385px;
        background: #f00 url(header.jpg);
        overflow: hidden;
        border: 1px solid #000
     }

     .nav{
        display: table;
        width: 100%;
        margin-top: 310px;
     }

     .navbutton{
        display: table-cell;
        height: 75px;
        background-image: url(link.png);
        padding: 0 4px;
     }

     .navbutton a{
        background: none repeat scroll 0 0 #FFFFCC;
        color: #FF0000;
        display: block;
        height: 100%;
        line-height: 75px;
        text-decoration: none;
        text-align: center;
     }

     .navbutton:hover{
        background-image: url(linkselected.png);
     }

     li:last-child, li.the_last_child{ padding-right: 0; }
     li:first-child, li.the_first_child{ padding-left: 0; }
于 2013-04-14T12:36:27.537 に答える
0

そのためのセットcssにすべての<li>タグを配置します<div><div id="customDiv">

#customDiv { margin-left:auto; margin-right:auto; }

これにより、左右の余白が等しくなり、余分なスペースが両側に均等に分配されます。

于 2013-04-14T12:48:09.693 に答える