Question

作为处理HTML5 + CSS3的新人我正在努力处理菜单中的菜单，文本和图标对齐。这个场景：菜单的每一行都有一个图标和一个文本（描述）。问题在于我无法让它们彼此足够分离以使其更具可读性。它们看起来太近了，我想在它们之间留有空格。以下是html和css3代码，提前感谢

最佳！

HTML代码

<div id="sidebar">
    <ul class="menu">
        <li><a href="#" class="home">Home</a></li>
        <li><a href="#" class="explore">Explore</a></li>
        <li><a href="#" class="users">   Users</a></li>
        <li><a href="#" class="signout">   Sign Out</a></li>
    </ul>
</div>

CSS3代码

 #sidebar {
    position: absolute;
    right: -240px;
    background: #DF314D;  
    width: 240px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 4px;

}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;

}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;

    /* .....some transitions */
}


menu a.home {

    display: inline-block;
    background: url(../imagenes/bpi.png) no-repeat left;

    padding-right: 20px; /*no luck with this line */
 }

.menu a.explore { 
    display: inline-block;
     background: url(../imagenes/gasi.png) no-repeat left;
 }

.menu a.users { 
    display: inline-block;
    background: url(../imagenes/bicici.png) no-repeat left; 
}

.menu a.signout { 
    display: inline-block;
    background: url(../imagenes/bai.png) no-repeat left; 
}

Answer 1

假设从填充中你试图应用背景图像应该是~20像素宽，这应该有效：

http://jsfiddle.net/5djz5kLk/

#sidebar ul li a {

    /* Add more left padding */
    padding: 15px 20px 15px 35px;

    /* the rest... */
}

/* 
  Set the background position with a pixel amount.
  The first value is the horizontal position, with the second
  being the vertical.
*/
.menu a.home {
    display: inline-block;
    background: url('http://placehold.it/20x20') no-repeat 10px center;
 }

/* repeat the above for each class */

如果您只使用left，则水平位置为左边缘。使用像素值（或任何数字单位），您可以设置左边缘的偏移量。

Answer 2

您需要添加填充并在代码中进行一些修改，我已对代码进行了更改，请按照以下链接获取结果

jsFiddle

<div id="sidebar">
<ul class="menu">
    <li><a href="#" class="home">Home</a></li>
    <li><a href="#" class="explore">Explore</a></li>
    <li><a href="#" class="users">   Users</a></li>
</ul>

css代码

#sidebar {
    position: absolute;
    right: 0;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 4px;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0
}
#sidebar ul li a {
    padding: 15px 20px 15px 30px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
}
#sidebar ul li a:hover {
    border-bottom: 1px solid #000;
}
#sidebar ul li a.home {
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_home_48px-20.png) no-repeat 5px 10px;
}
#sidebar ul li a.explore {
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_home_48px-20.png) no-repeat 5px 10px;
}
#sidebar ul li a.users {
    background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_home_48px-20.png) no-repeat 5px 10px;
}

我无法在菜单项中对齐图标及其文本

2 个答案: