如何將other更改爲右側？第一次導航至右側
li{
display: inline;
}
#main{
float: left;
}
#other{
float: left;
}<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>這應該是這樣的：
one two three other
但不喜歡這樣：
one two three other
PS：我不能改變的HTML。
我知道這可以通過絕對定位來完成，但這對於響應式設計來說非常昂貴。因此環顧其他解決方案。
一個快速的方法來實現這是放入一個包含的元素，它是浮動的左邊，然後浮動兩個ul的右邊。由於#other首先會首先浮動。
ul {
margin: 0;
padding: 0;
margin-right: 5px;
}
li {
display: inline;
}
#main,
#other {
float: right;
}
div {
text-align: left;
float: left;
display: inline;
}<div>
<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
</div>我很傷心自己。謝謝。 –
從您的#other元素中刪除float: left，而是將該元素的display設置爲inline-block。
然後調整佈局，你可以從內部ul元素，除了空間，它從#main元素與一些margin-left，而不是刪除padding-left：
li{
display: inline;
}
#other {
display: inline-block;
}
#other ul {
padding-left: 0;
margin-left: 5px;
}
#main{
float: left;
}<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>檢查這個片段
li {
display: inline-block;
}
#main {
float: left;
}
#other {
position: absolute;
text-align: right;
left: 100px;
}<nav id="other">
<ul>
<li>other</li>
</ul>
</nav>
<nav id="main">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
我看不出有任何的div在你的代碼 –
我的意思是導航在我的例子。正在努力擺出合適的頭銜。 –
正如你有引導標籤，爲什麼你不使用[navbar]（http://getbootstrap.com/components/#navbar）這個？ –