在 CSS-Table 单元格内向右浮动

Question

我对正在制作的布局有疑问。我想做一个简单的水平导航菜单，我从这个开始： https://jsfiddle.net/74596pc8/

但是，当我尝试将第 2 列内的菜单向右浮动时，第一个列的边距变得一团糟，如下所示： https://jsfiddle.net/33pf48u2/2/

HTML:

<div class="top-bar">


        <div class="grid">

            <div class="row">

                <div class="col3">
                    LOGO
                </div>

                <div class="col9">
                    <nav class="right" style="height:55px;">
                        <div class="menu"><ul><li class="page_item page-item-2"><a href="http://127.0.0.1/sample-page/">Sample Page</a></li></ul></div>
                    </nav>
                </div>

            </div>

        </div>     

     </div>

    <div class="home-bar">

        <div class="grid">
             <div class="row">
            </div>

        </div>

    </div>

    <div class="home-posts">

        <div class="grid">

        </div>

    </div>

网格：

.grid {
   margin:0 auto;
  max-width: 1200px;}

@media (min-width: 600px) {
  .row {
    display: table-row;
    width: 100%;
    table-layout: fixed; }

  .col {
    display: table-cell; }

 /* .row-padded {
    margin-left: -1rem;
    margin-right: -1rem; }

  .row-padded .row {
    border-spacing: 1rem 0; } } */

@media (min-width: 600px) {
  .col1 {
    display: table-cell;   
    width: 8.333333%; }
 ....

应用CSS:

/* Nav Menu
---------------------------------------*/
html ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}
.right{
float:right;
}

请告知这是为什么以及如何解决它:)

提前致谢。

Answer 1

您可以使用 text align: right 而不是 float right 属性，它会给您相同的结果。

.right {
    text-align: right;
}

在 CSS-Table 单元格内向右浮动

Float Right Inside A CSS-Table Cell

html

css

css-float

css-tables