Question

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

但是，当我尝试将菜单中的菜单浮动到右侧时，第一列的边缘全部搞砸了，如下所示： 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属性代替向右浮动，它会给您相同的结果。

.right {
    text-align: right;
}

在CSS-Table Cell内部浮动

1 个答案: