0

ナビゲーションをインラインで配置したいのですが、ボタン間にスペースがありません。それらをページの中央に配置する方法についても、いくつかのヒントを提案できます。試してみましmargin:0, padding-left:0pxたが、それらの間にまだスペースがあります。htmlコードは次のとおりです。

<div id="nav">
<nav role="navigation">
<ul>
<li><a href="./" class="button" title="Go to the home page"</title>Home</a></li>
<li><a href="about.php" class="button">About</a></li>
<li><a href="contact.php" class="button">Contact</a></li>    
</ul></nav></div>

そしてCSSスタイル：

.button{ 
 color: rgb(0, 0, 0);
 font-size: 15px;
padding: 11px;
   text-shadow: 0px 2px 2px rgba(144,150,150,0.75);
  background: rgb(255, 255, 248);
  background: -moz-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
  background: -webkit-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: -o-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: -ms-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
 background: linear-gradient(0deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.73);
 box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.73);
  }
 #nav li{
 display:inline;
 }

 #nav ul{
 list-style-type:none;
 margin:0;
  }
 #nav ul li a{text-decoration:none;
font:Tahoma, Helvetica, Arial, sans-serif;
letter-spacing:0.1em;

 }
4

3 に答える 3

0

で、#nav liを使用display: blockし、float: left代わりに次のようにします。

#nav li {
  display: block;
  float: left;
}

DEMOを参照してください。

于 2013-02-07T23:21:28.273 に答える
0

最初にナビゲーションを画面の中央に配置するには、以下を使用します。

#nav{
        width:960px; -- change me to correct size
        margin-right:auto;
        margin-left:auto;
        height:110px;  -- change me! 
}

リストに関しては、これはリストを取り、左から右に並べます。リンク間の唯一のギャップは、互いに重ならないように小さなパディングにする必要があります。

#nav ul {
    display: inline;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#nav li {
    display: inline;
    font-size: 11px;
    padding-right: 2px;
    padding-left: 2px;
    width: 100px; -- this depends on the number of buttons you have of course. 
}

お役に立てれば！

于 2013-02-07T23:23:59.687 に答える
0

空白なしでインラインで表示したい場合は、letter-spacingまたはword-spacing負の値を使用してみてください

于 2013-02-07T23:25:12.173 に答える