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 - Flexible Boxes

具体来说，您需要一个包含display: flex;和justify-content: space-between;

的容器

类似的东西：

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

请注意，仅在IE11 +和所有常绿浏览器（Chrome，Firefox等）上支持flexbox。 IE10有部分支持 See for more details regarding browser support

如果您需要支持IE10以前的浏览器，可以尝试使用position: absolute;上的right: 0;和ul。

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

Answer 2

我从您对原始帖子的评论中看到，您正在避免浮动，因为您的元素没有正确排列。

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

将顶部边距设置为零时，完美排列。您的元素具有不同的高度，因此您需要使用margin / padding将它们排成一行。

Answer 3

更改以下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>

Answer 4

尝试position：absolute;，right：0px;

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

4 个答案: