2

100% 幅の DIV 内に 6 つのリンクがあります。

ブラウザのサイズを縮小すると、リンクが重なり合ったり、移動したり、下に移動したり、消えたりするのを防ぐにはどうすればよいですか? それらを水平div内に残したいと思います。

これが私のコードです：

.nav {
  width: 100%;
  height: 84px;
  float: left;
  background: #333;
}

.logo {
  width: 317px;
  height: 84px;
  float: left;
  background: url('img/lifesign.png');
}

.navlink {
  height: 84px;
  font-family: 'open_sansbold';
  color: #FFF;
  text-align: center;
  line-height: 84px;
  padding-left: 22px;
  padding-right: 22px;
  float: right;
  font-size: 80%
}
<div class="nav">
  <a href="contact.htm" class="navlink">CONTACT</a>
  <a href="contact.htm" class="navlink">GET INVOLVED</a>
  <a href="contact.htm" class="navlink">Q+A</a>
  <a href="contact.htm" class="navlink">HOW IT WORKS</a>
  <a href="contact.htm" class="navlink">WHO WE ARE</a>
  <a class="logo" href="home.htm"></a>
</div>

4

2 に答える 2

1

クラスにa を設定min-widthします.nav。

.nav {
    width: 100%;
    height: 84px;
    float: left;
    background: #333;

    min-width: 960px; /* or whatever width you need */
}
于 2012-12-06T02:06:18.183 に答える
0

ここでの理想は、固定幅の div (以下の「ページ」の id) を作成して、ナビゲーションやその他のページ要素を含めることだと思います。また、ナビゲーション自体の構造の一部と、不要なルールの一部を自由にクリーンアップしました。ここではリストが理想的だと思います。あなたは右に浮かんでいるので、順序を逆にしたいかもしれませんが、それ以外の場合はうまく機能します.

<html>
    <head>
        <style>
        body { text-align: center; }
        #container { width: 960px; margin: 0 auto; }
        #nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; }
        #nav li { float: right; }
        #nav li.logo { float: left; }
        #nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; }
        #nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="nav">
                <li class="logo"><a href="home.htm"></a></li>
                <li><a href="contact.htm">CONTACT</a></li>
                <li><a href="contact.htm">GET INVOLVED</a></li>
                <li><a href="contact.htm">Q+A</a></li>
                <li><a href="contact.htm">HOW IT WORKS</a></li>
                <li><a href="contact.htm">WHO WE ARE</a></li>
            </ul>
            <div id="main">
                <!-- page content here -->
            </div>
        </div>
    </body>
</html>
于 2012-12-06T02:57:56.643 に答える