CSS 定位不使用浮动或边距调整

Question

如何在不使用浮动的情况下将 UL 元素移动到浏览器的右侧，或者通过使用 margin px/% 等工具“猜测”该元素与右边距齐平？

.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>

Answer 1

根据您需要支持的浏览器，您可以使用 Flexbox。

MDN - 灵活的盒子

display: flex;具体来说，您想要一个带有和 的容器justify-content: space-between;

就像是：

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

请注意，flexbox 仅在 IE11+ 和所有常青浏览器（Chrome、Firefox 等）上受支持。IE10有部分支持。
有关浏览器支持的更多详细信息，请参阅。

如果您需要支持 IE10 之前的浏览器，您可以尝试position: absolute;在right: 0;您的ul.

弹性盒：

.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;
}