Question

我的图标和文字位于不同的列表标签中。图标与其标题不对齐。它们被写成两个无序列表。我现在唯一的解决方案是将列表合并到一个ul，但我希望有更好的方法来实现它。非常感谢任何帮助。

<ul>
    <li><i class="fa fa-cog"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-user"></i></li>
    <li><i class="fa fa-cart"></i></li>
</ul>
<ul>
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>

Answer 1

方法1：如果您不希望图标和文字处于同一个ul，请尝试为li定义固定宽度。

li {
    display: inline-block;
    margin: 0 40px;
    text-align: center;
    width: 100px;
}

方法2： 如果您可以集成2个列表，那么这是更好的解决方案：

<ul>
    <li><i class="fa fa-cog"></i>Settings</li>
    <li><i class="fa fa-home"></i>Home</li>
    <li><i class="fa fa-user"></i>Account</li>
    <li><i class="fa fa-cart"></i>Cart</li>
</ul>

的CSS：

ul li {
    display: inline-block;
    margin: 0 30px;
    text-align: center;
}
ul li i {
    display: block;
    /* add margins here to adjust icons */
}

Answer 2

将图标和标题合并到一个列表中。

<ul>
  <li><i class="fa fa-cog"></i>Settings</li>
  <li><i class="fa fa-home"></i>Home</li>
  <li><i class="fa fa-user"></i>Account</li>
  <li><i class="fa fa-cart"></i>Cart</li>
</ul>

Answer 3

我可能会在这里迟到。但试试这个：

li {
    display: inline-block;
    text-align: center;
    width: 50px;
}

Answer 4

最好的选择是使用一个列表而不是两个，但如果您愿意，可以float左侧<ul>。请看下面：

.icons{float:left;}
.names{float:left;}

<ul class="names">
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>
<ul class="icons">
    <li><i class="fa fa-cog"></i>icon-setting</li>
    <li><i class="fa fa-home"></i>icon-home</li>
    <li><i class="fa fa-user"></i>icon-account</li>
    <li><i class="fa fa-cart"></i>icon-cart</li>
</ul>

Answer 5

@Manoj Kumar给了很好的回答但是，如果需要两个列表，那么试试这个

.left{
  float: left;
}
.clear{
 clear: left; 
}

<ul class="left">
    <li><i class="fa fa-cog"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-user"></i></li>
    <li><i class="fa fa-cart"></i></li>
</ul>
<ul class="left">
    <li>Settings</li>
    <li>Home</li>
    <li>Account</li>
    <li>Cart</li>
</ul>
<div class="clear"></div>

Answer 6

更好的方法是保留一个列表而不是两个

<ul class="menu">
  <li><i class="fa fa-cog"></i><span>Settings</span></li>
  <li><i class="fa fa-home"></i><span>Home</span></li>
  <li><i class="fa fa-user"></i><span>Account</span></li>
  <li><i class="fa fa-cart"></i><span>Cart</span></li>
</ul>

<button class="toogle-menu" type="button">toogle</button>

<script type="text/javascript">
    $('.toogle-menu').click(function(){
        $('.menu li span').toogle();        // http://api.jquery.com/toggle/
    });
</script>

<style>
    .menu{
        padding:0;
        margin:0;
        list-style:none;
    }
    .menu li{ 
        padding: 5px;
    }
    .menu li span{ 
        display: inline-block;
        margin: 0 0 0 5px;
    }

</style>

如何将图标与其标题或文字说明对齐？

6 个答案: