簡單的導航左右對齊

所以我之前正確地做過這件事，發現了一些可行的例子，但我真的想弄清楚爲什麼這種情況正在發生。基本上我需要一個左側和右側的導航欄，而我現在嘗試的方式是右側被壓下。簡單的導航左右對齊

不要猶豫，告訴我這樣做完全不同的方式！我在這一點上主要關注的是理解正在發生的事情以及制定行業最佳實踐。

繼承人我的代碼

<header class="header"> 
<nav class="nav"> 
    <div class="nav-left"> 
     <ul> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">Blah</a></li> 
     </ul> 
    </div> 
    <div class="nav-right"> 
     <ul> 
      <li><a href="#">Bloh</a></li> 
      <li><a href="#">Bloh</a></li> 
     </ul> 
    </div> 
</nav>

nav { 
    background: green; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

nav a { 
    display: block; 
    width: 60px; 

} 

.nav-left li { 
    float: left; 
} 

.nav-right li { 
    float: right; 
}

來源

2015-06-07 user3085077

您的標記組織非常好。您的鏈接被推下的原因是因爲您的nav-left佔據了整個導航寬度。這是一個JSFiddle：http://jsfiddle.net/fejut75a/2/。

請注意，您可以根據需要調整填充。

CSS：

nav { 
    background: green; 
    padding: 15px; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

nav a { 
    display: block; 
    width: 60px; 
} 

.nav-left { 
    float: left; 
} 

.nav-left ul li { 
    float: left; 
} 

.nav-right ul li { 
    float: right; 
}

來源

2015-06-07 02:52:41

非常感謝！是否有什麼特別的原因讓你在nav-left和nav-right中的「li」之前加上「ul」標籤，但是沒有在「？」之前加上前綴標籤？ – user3085077

@ user3085077我認爲在CSS選擇器中更具體一些是更好的做法，這樣可以更好地維護和組織您的代碼。我會在a之前加上預先標記，我只是忘了這一次。 –

還有關於其他解決方案的任何想法？它使用哪一個或者它只是偏好？ – user3085077

你必須讓.nav左和.nav右浮動並清除在的結尾浮動.nav元素。修改CSS如下：

nav { 
    background: green; 
} 
nav:after { 
    clear: both; 
    content: '.'; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
nav ul li { 
    display: inline-block; 
} 
nav a { 
    display: block; 
    width: 60px; 
} 

.nav-left { 
    float: left; 
} 

.nav-right { 
    float: right; 
}

在原來的CSS文件中，<導航>將分配一個<李>元素高度渲染.nav左，它導致爲什麼.nav右被推倒。製作.nav-left和.nav-浮動，這些元素沒有預先分配空間，因此它們可以站在相同的y位置。

將所有元素設置爲<nav>元素浮動後，邏輯上沒有任何元素。所以我們必須在nav中添加僞內容：在之後，使其呈現正確的高度。

來源

2015-06-07 02:51:34 ericsk

的感謝！關於其他解決方案的任何想法以及爲什麼他們可能會更好或更糟？ – user3085077

我想你想是這樣的：

DEMO

使用的顯示：inline-block的;

HTML

<header class="header"> 
<nav class="nav"> 
    <div class="nav-left"> 
     <ul> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">Blah</a></li> 
     </ul> 
    </div> 
    <div class="nav-right"> 
     <ul> 
      <li><a href="#">Bloh</a></li> 
      <li><a href="#">Bloh</a></li> 
     </ul> 
    </div> 
</nav>

CSS

nav { 
    background: green; 
    display:inline-block; 
    height:45px; 
    width:100%; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    display:inline-block; 
    overflow: hidden; 
    float:left; 
} 

nav a { 
    display: block; 
    width: 60px; 
} 

li 
{ 
    display:inline-block; 
} 

.nav-left { 
    float: left; 
} 

.nav-right { 
    float: right; 
}

來源

2015-06-07 02:52:47 divy3993

好的解決方案。 –

謝謝！對亨利解決方案有任何想法？有沒有任何理由與其中一個去？ – user3085077

請參閱.nav-left和.nav-right是div的所以他們需要浮動（我的意思是浮動：左/右）。浮動到'李'就像有力地推動他們左/右，之後，你只需要小心使他們在單線，所以顯示：inline-block;是爲了那個。如果我想讓文字向右/左移，將會使用文本對齊方式：左/右，所以我決不會將浮動元素設置爲「li」。畢竟@亨利和我有不同的答案，但也是正確的。 – divy3993

-1

<nav class="nav"> 
    <div class="nav-left"> 
     <ul> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">Blah</a></li> 
     </ul> 
    </div> 
    <div class="nav-right"> 
     <ul> 
      <li><a href="#">Bloh</a></li> 
      <li><a href="#">Bloh</a></li> 
     </ul> 
    </div> 
</nav> 


<!--css--> 
nav { 
    background: #ccc; 
} 
nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display:inline-block; 
} 

nav a { 
    display: block; 
    width: 60px; 

} 
.nav-left{ 
    float:left; 
} 
.nav-right{ 
    float:right; 
} 
.nav-left li { 
    float: left; 

} 

.nav-right li { 
    float: right; 
}

https://jsfiddle.net/2xsL8gow/

來源

2015-06-07 02:52:54

簡單的導航左右對齊

回答

相關問題