不使用浮動或邊距調整的CSS定位

如何在不使用浮動的情況下將我的UL元素移動到瀏覽器的右側，或者通過使用諸如此類的工具來「猜測」元素是否與右邊距齊平作爲保證金px /％等？不使用浮動或邊距調整的CSS定位

.nav li { 
display: inline; 
} 

.nav h1 { 
background-color: red; 
display: inline-block; 
} 

.nav ul { 
display: inline-block; 
border: 1px solid black; 
} 


<div class="nav"> 

     <h1>Resume</h1> 
     <ul> 
      <li>Home</li> 
      <li>Portfolio</li> 
      <li>Skills</li> 
      <li>Experience</li> 
      <li>Contact</li> 
     </ul> 
</div>

來源

2015-06-14 case_2501

爲什麼不使用float？ – Rudi

嗨Rudi，當我使用浮動，它移動UL元素與H1元素不符合，看起來很混亂，有沒有辦法解決這個問題？ –

是的，或者在h1之前移動ul，或者讓h1浮動：left，這樣它們都會浮動。在後一種情況下，您需要清除：在元素之後。 – Rudi

根據您需要支持哪些瀏覽器，您可以使用flexbox。

MDN - Flexible Boxes

具體來說，你想與display: flex;和justify-content: space-between;

喜歡的東西的容器：

<div class="nav" style="display: inline-flex; justify-content: space-between;"> 
    ... child items here ... 
</div>

注意Flexbox，就只支持IE11 +和所有常綠瀏覽器（Chrome，火狐，等等）。 IE10有部分支持。
See for more details regarding browser support。

如果您需要支持IE10以前的瀏覽器，則可以嘗試在ul上使用position: absolute;和right: 0;。

Flexbox的：

.nav { 
    display: inline-flex; //or just flex 
    justify-content: space-between; 
} 

.nav li { 
    display: inline; 
} 

.nav h1 { 
    background-color: red; 
    display: inline-block; 
} 

.nav ul { 
    display: inline-block; 
    border: 1px solid black; 
}

使用位置：

.nav li { 
    display: inline; 
} 

.nav h1 { 
    background-color: red; 
    display: inline-block; 
} 

.nav ul { 
    display: inline-block; 
    border: 1px solid black; 
    position: absolute; 
    right: 0; 
}

來源

2015-06-14 05:50:56

再次編輯以更好地匹配您的示例代碼，並且因爲您需要justify-content：space-between而不是justify-content：flex-end。你也想要inline-flex而不是flex。 –

最後一次使用CSS複製並粘貼時應該可以正常工作。 –

謝謝Jim，最後的解決方案是一個不錯的簡潔解決方案。謝謝。但有一件事，我怎麼才能讓H1和UL元件水平居中對齊？ –

我從你的出身後，你是避免彩車因爲你的元素不排隊正確的評論看。

.nav li { 
    display: inline; 
} 

.nav h1 { 
    background-color: red; 
    display: inline-block; 
    float: left; 
} 

.nav ul { 
    display: inline-block; 
    border: 1px solid black; 
    float: right; 
}

排隊完美，當你設置頂邊距設置爲零。您的元素高度不同，因此您需要使用邊距/填充將它們排列起來。

來源

2015-06-14 06:07:15 roflmyeggo

謝謝Rof，但是這個對齊每個元素的頂部，它仍然看起來很亂，請看這裏http：// jsfiddle。net/mugman/0r4vvj9L/15 /我希望UL與H1元素的中間對齊？ –

此外，下面的元素向上移動到白色空間！ –

這是因爲你的.slider div沒有設置爲'display：inline-block;'。這裏你去：http://jsfiddle.net/0r4vvj9L/28/，但你將不得不使用字體大小和填充來調整它的方式。 – roflmyeggo

更改以下CSS屬性

 .nav li { 
     display: inline; 
    } 

    .nav h1 { 
     background-color: red; 
     display: inline-block; 
    } 

    .nav ul { 
     display: inline-block; 
     float:none; 
     right:0; 
     margin-right:10px; // its just an example you can move as much as you want 
     border: 1px solid black; 
    }

<h1>Resume</h1> 
    <ul> 
     <li>Home</li> 
     <li>Portfolio</li> 
     <li>Skills</li> 
     <li>Experience</li> 
     <li>Contact</li> 
    </ul>

來源

2015-06-14 06:20:50 Daniel

嘗試位置是：絕對;,右：0像素;

來源

2015-06-14 08:48:48

不使用浮動或邊距調整的CSS定位

回答

相關問題