8

現在、ナビゲーションバーを右に揃えようとしていますが、左に固執していてどうすればよいかわかりません。text-align、float など、すべてを試したような気がします。違いがある場合は、HTML5 CSS リセットも含まれています。

誰かが私のコードを見て、これらのナビゲーション項目が反対側に移動しない何らかの理由があるかどうかを教えてもらえますか? 私は本当にイライラしています。ありがとう。

HTML:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

CSS:

  body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}

注：これは私が修正したハックな方法です

ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}

ただし、それが非常に良い方法であるかどうかはわかりません...

4

6 に答える 6

6

明らかに非常にばかげた解決策の 1 つ (ただし、機能します) は、リスト項目を右にフロートさせてから、HTML で順序を逆にすることです。このような：

<ul>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="index.html">Home</a></li>
</ul>

body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}

ここにJSFiddleがあります

于 2013-01-28T00:59:36.970 に答える
4

これは簡単

http://jsfiddle.net/qZ7Tr/10/

li floatに変更display:inline;

body {
    font: normal 300 .8em'Open Sans', sans-serif;
    overflow-x:hidden;
}
ul {
    text-align: right;
    width: 100%;
    background-color: #999;
    height: 20px;
}
li {
    display:inline;
}
ul a {
    color: white;
    padding: 0 10px;
    text-decoration: none;
}
ul a:hover {
    color: #333;
}
于 2013-01-28T03:00:51.563 に答える
1

CSS で次の行を変更します。

ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-left: 150px;}

これに：

ul {float: right; background-color: #999; height: 20px; padding-left: 150px;}

問題は、元のコードが幅を 100% に設定していたことです。そのため、画面全体に伸びていました。text-align内側の<li>要素を右にフロートさせません。したがって、それを正しく達成する唯一の方法は、を取り除きwidth: 100%;、float: right;

ページ全体に灰色のボックスが必要な場合は、と<ul>を含むでラップします。唯一の道。<div>background-color: #999;width:100%

デモ用に作成した HTML ファイルを次に示します。

<!DOCTYPE html>

<html lang="en">
<head>
  <title></title>
  <style type="text/css">
body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {float: right; background-color: #999; height: 20px; padding-left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}
  </style>
</head>

<body>
  <ul>
    <li><a href="index.html">Home</a></li>

    <li><a href="company.html">Company</a></li>

    <li><a href="team.html">Management Team</a></li>

    <li><a href="contact.html">Contact</a></li>
  </ul>
</body>
</html>

編集:<div>ラッパーの概念を示す追加のテスト HTML ファイル。わたしにはできる。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>

  <title></title>
  <style type="text/css">
    body
    {
        font: normal 300 .8em 'Open Sans', sans-serif;
        overflow-x: hidden;
    }

    div
    {
        float: left;
        width: 100%;
        background-color: #999;
    }

    ul
    {
        float: right;
        background-color: #999;
        height: 20px;
        padding- left: 150px;
    }

    li { float: left; }

    ul a
    {
        color: white;
        padding: 0 10px;
        text-decoration: none;
    }

    ul a:hover { color: #333; }
</style>
</head>

<body>
  <div>
    <ul>
      <li><a href="index.html">Home</a></li>

      <li><a href="company.html">Company</a></li>

      <li><a href="team.html">Management Team</a></li>

      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</body>
</html>
于 2013-01-28T01:05:58.403 に答える
0

以下のコードをお勧めします。スタイルを簡単に適用できます。

HTML：

<div class="nav">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="company.html">Company</a></li>
      <li><a href="team.html">Management Team</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS：

body {
    font: normal 300 .8em 'Open Sans', sans-serif; 
    overflow-x:hidden;
}
.nav {
    overflow: hidden;
    background-color: #999;    
    height: 20px; 
}
 ul {
    overflow: hidden;
    float: right;
}
ul li {
      float: left;
}
ul li a {color: white; 
    padding: 0 10px; 
    text-decoration: none;
}
 ul li a:hover {
      color: #333;
}

切り取られたコードを表示http://jsfiddle.net/sophy/eRLtw/

于 2013-01-28T02:39:46.737 に答える
0 
ul {float:right;}

ul に幅を与えないでください。探しているものが正確に得られます。

于 2016-03-09T20:58:36.713 に答える