0

ロゴを左揃えにし、ナビゲーションを右揃えにしようとしています。レスポンシブ ページに「スケルトン」ボイラープレートを使用しています。

ナビを右に浮かせても、ロゴとナビが同じ「線」上に留まりません。この例に追加する前に、フロート ライト ルールを CSS から削除しました。

これは私が使用しているCSSの一部であり、問​​題があると思われる場所であり、残りはここにリストされています

.nav {
margin: 0px;
padding: 0px;
white-space: nowrap;
list-style-type: none;

}
.logo {

}
.nav li {
display:inline;
}
.nav li a {
 padding:0.2em 1em;
 background:#;
 color:#000;
text-decoration:none;
border:0px solid #000;
}
.nav li a hover{
background:#08c;
color:#fff;
 }
4

1 に答える 1

2

左右の要素からそれぞれマージンを削除するクラスalphaとクラスがありません。omega

HTMLは次のようになります。

<div class="header">
       <div class="two-thirds column alpha">
         <div class="logo"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQNGEBMvQ55sHEC0xWxvpkyW-H_ZylS9Fk5ktg3OLKLS3w6yCr29w" width="47" height="36"></div>
      </div>
      <div class="one-third column omega">
        <div class="nav">
          <ul><li><a href="hire.html">hire</a></li><li><a href="bio.html">Bio</a></li><li><a href="contact.html">Contact</a></li><li><a href="blog.html">blog</a></li></ul>
        </div>
      </div>

サンプルコードを含むコードペンは次のとおりです：http：//cdpn.io/rHBio

編集

さらに説明するために（反対票#bitterの後でも）。

2つの別々の行にナビゲーションがある理由は、次のメディアクエリの後、コンテナとすべての列が300pxに設定されているためです。

 @media only screen and (max-width: 767px) {
        .container { width: 300px; }}

480pxから767pxの間のデバイスに対してそれをオーバーライドし、420pxの幅を与える別のメディアクエリがあります。

 @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }

使用されるクラスtwo-thirdsとone-third、は420pxまたは300pxに設定されているため、行全体を占めます（スタック/線形になります）。

これをオーバーライドして同じ行に配置するには、追加のCSSルールを使用してこれらの要素をターゲットにし、メディアクエリに合わせて幅を100/200pxまたは120/300pxに減らす必要があります。

于 2013-01-21T00:17:28.297 に答える