Question

我试图建立一个管理面板但是我的ul标签出现了问题，这个标签没有按照我想要的方式对齐，而是垂直而不是水平。我试图在这里检查一些解决方案，但它们似乎不起作用。这是我的ul代码 html 代码：

<div class="col-md-8">
   <h2 align="center"><i class="glyphicon glyphicon-home"></i> WELCOME ADMIN</h2>
   <ul class="dash">
      <li>
         <a href="calendar.php" title="Report" class="tip" data-placement="bottom" >
         <img src="images/icons/report.png" alt="" />
         <span>Report</span>
         </a>
      </li>
      <li>
         <a href="view.php" title="Customers" class="tip" data-placement="bottom" >
         <img src="images/icons/customers.png" alt="" />
         <span>Customers</span>
         </a>
      </li>
      <li>
         <a href="insert.php" title="Add Customers" class="tip" data-placement="bottom" >
         <img src="images/icons/add_customer.png" alt="" />
         <span>Add Customers</span>
         </a>
      </li>
      <li>
         <a href="member.php" title="Users" class="tip" data-placement="bottom" >
         <img src="images/icons/users.png" alt="" />
         <span>Users</span>
         </a>
      </li>
      <li>
         <a href="register3.php" title="Add User" class="tip" data-placement="bottom" >
         <img src="images/icons/add_user.png" alt="" />
         <span>Add User</span>
         </a>
      </li>
   </ul>
</div>

我的 css 代码：

ul.dash {
    margin: 20px;
    display:block;
}

ul.dash li {
    float:center;
    display:inline-block;
    margin:0 15px 15px 0;
}

ul.dash li a {
    display:block;
    width:106px;
    height:102px;
    text-decoration:none;
}

ul.dash li a img {
    display:inline;
    width:48px;
    margin-center:0px;
    margin-top:20px;
}

ul.dash li a span {
    display:block;
    width:100%;
    text-align:center;
    margin-top:10px;
    font-size:11px;
}

ul.dash li a {
     color:#000;
 background:url('../images/icons/largebut.png') 0 0 no-repeat;
}


ul.dash li a:hover {
 background:url('../images/icons/largebut_hover.png') 0 0 no-repeat;
}

关于我如何进行的任何建议都将非常感激。

Answer 1

将以下内容添加到CSS

ul.dash {
  float:left;
  width:100%;
}

检查JSfiddle

Answer 2

您可以使用white-space: nowrap，以便项目不会垂直中断。

ul.dash {
  white-space: nowrap;
}
ul.dash li {
  display: inline-block;
}

JSFiddle演示：https://jsfiddle.net/2m01hckp/3/

Answer 3

试试这个

ul.dash {
        margin: 20px;
        display:block;
        float:left;
        width:100%;
        text-align:center;
        margin-left:0;
        padding-left:0;

    }

    ul.dash li {
        float:center;
        display:inline-block;
        margin:0 15px 15px 0;
    }


    ul.dash li a {
        display:block;
        width:106px;
        height:102px;
        text-decoration:none;
    }

    ul.dash li a img {
        display:inline;
        width:48px;
        margin-center:0px;
        margin-top:20px;
    }

    ul.dash li a span {
        display:block;
        width:100%;
        text-align:center;
        margin-top:10px;
        font-size:11px;
    }
    ul.dash li a {
         color:#000;
     background:url('../images/icons/largebut.png') 0 0 no-repeat;
    }


    ul.dash li a:hover {
     background:url('../images/icons/largebut_hover.png') 0 0 no-repeat;
    }

DEMO HERE

水平对齐<ul>标记

3 个答案: