如何在CSS中向右侧浮动<li>？

Question

我有一个标题作为表格，我试图将最后一个li浮动到右边。

我已经尝试将第5个li的padding-right％设置在最后，但显然这不是理想的，因为在其他屏幕上它会导致问题。我也尝试将它漂浮到右边，但它会弄乱垂直对齐。有什么建议吗？

＆＃13;

＆＃13;

#header ul {
    width: 100%;
    float: left;
    margin: 0;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header ul li { 
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

/* Logo */
#header li:nth-child(1) {
    font-size: 40px;
    font-family: serif;
    font-weight: bold;
    padding-right: 4%;
}

/* Back & Forward buttons */
#header li:nth-child(2) {
    padding-right: 8.2%;
}

/* Search box */
#header li:nth-child(3) {
    padding-right: 4.5%;
}

/* Break line */
#header li:nth-child(4) {
    padding-right: 2%;
}

/* Icons */
#header li:nth-child(5) {}

/* Icons */
#header li:nth-child(6) {
    border: 1px dotted red;
}

＆＃13;

<div id="header">
    <ul>
        <!-- Logo -->
        <li width="10%"><div>B</div></li>
        <!-- Back / forward buttons -->
        <li>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
        </li>
        <!-- Search box -->
        <li>
            <input type="search" id="search" size="30" placeholder="What are you looking for?" />
        </li>
        <!-- Break line -->
        <li>
            <span class="hdr-break"></span>
        </li>
        <!-- Icons -->
        <li>
            <i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
            <i class="material-icons md-26 icn-lft icn-map">map</i>
            <i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
            <i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
        </li>
        <!-- This should float right -->
        <li>
            <p>x</p>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你可以使用flexbox，它可以很容易地完成。使用align-items: center;会使项目垂直居中。将最后一项设置为margin-left: auto;，将“x”图标发送到最右侧。

运行下面的代码段并点击“整页”查看。

#header ul {
    width: 100%;
    /* float: left; */
    margin: 0;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    display: flex;
    align-items: center;
}

#header ul li { 
    height: 100%;
    /* display: table-cell; */
    /* vertical-align: middle; */
}

/* Logo */
#header li:nth-child(1) {
    font-size: 40px;
    font-family: serif;
    font-weight: bold;
    padding-right: 4%;
}

/* Back & Forward buttons */
#header li:nth-child(2) {
    padding-right: 8.2%;
}

/* Search box */
#header li:nth-child(3) {
    padding-right: 4.5%;
}

/* Break line */
#header li:nth-child(4) {
    padding-right: 2%;
}

/* Icons */
#header li:nth-child(5) {}

/* Icons */
#header li:nth-child(6) {
    border: 1px dotted red;
    margin-left: auto;
}

<div id="header">
    <ul>
        <!-- Logo -->
        <li width="10%"><div>B</div></li>
        <!-- Back / forward buttons -->
        <li>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
        </li>
        <!-- Search box -->
        <li>
            <input type="search" id="search" size="30" placeholder="What are you looking for?" />
        </li>
        <!-- Break line -->
        <li>
            <span class="hdr-break"></span>
        </li>
        <!-- Icons -->
        <li>
            <i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
            <i class="material-icons md-26 icn-lft icn-map">map</i>
            <i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
            <i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
        </li>
        <!-- This should float right -->
        <li>
            <p>x</p>
        </li>
    </ul>
</div>

Answer 2

使用现有代码，您只需删除float:left;并添加display: table。

#header ul {
        width: 100%;
        display: table;
        ....

这是您的代码段显示它。

＆＃13;

＆＃13;

#header ul {
    width: 100%;
    display: table;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header ul li { 
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

/* Logo */
#header li:nth-child(1) {
    font-size: 40px;
    font-family: serif;
    font-weight: bold;
    padding-right: 4%;
}

/* Back & Forward buttons */
#header li:nth-child(2) {
    padding-right: 8.2%;
}

/* Search box */
#header li:nth-child(3) {
    padding-right: 4.5%;
}

/* Break line */
#header li:nth-child(4) {
    padding-right: 2%;
}

/* Icons */
#header li:nth-child(5) {}

/* Icons */
#header li:nth-child(6) {
    border: 1px dotted red;
}

＆＃13;

<div id="header">
    <ul>
        <!-- Logo -->
        <li width="10%"><div>B</div></li>
        <!-- Back / forward buttons -->
        <li>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_left</i>
            <i class="material-icons md-38 back-forward icn-hvr">chevron_right</i>
        </li>
        <!-- Search box -->
        <li>
            <input type="search" id="search" size="30" placeholder="What are you looking for?" />
        </li>
        <!-- Break line -->
        <li>
            <span class="hdr-break"></span>
        </li>
        <!-- Icons -->
        <li>
            <i class="material-icons md-26 icn-lft icn-stamp">add_location</i>
            <i class="material-icons md-26 icn-lft icn-map">map</i>
            <i class="material-icons md-26 icn-lft icn-hvr">business_center</i>
            <i class="material-icons md-26 icn-lft icn-hvr">notifications</i>
        </li>
        <!-- This should float right -->
        <li>
            <p>x</p>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试使用：

#header li:last-child {
  right: 20px;
  top: 10px;
  position: absolute;
  height: 50px;
}

Answer 4

您所要做的就是使用最后一个孩子。现在你正在使用display：table-cell，将它切换到内联块，这将有效。

CSS

 #header li:last-child { float: right; }

 #header ul li { display: inline-block; }