Question

我无法解决这个问题。每个人都必须从某个地方开始，我只是开始学习CSS所以请耐心等待。希望大家都明白。

所以目前这是浏览器中显示的内容

这是HTML

<div class="section-2">

                <ul class="big-features">

                    <li>

                        <img src="images/accept.png">
                        <h2>Easily Accept Credit</br>Cards</h2>

                    </li>
                    <li>

                        <img src="images/location.png">
                        <h2>Multiple Location</br>Inventory</h2>

                    </li>
                    <li>

                        <img src="images/faster.png">
                        <h2>Make Faster</br>Transactions</h2>

                    </li>
                    <li>

                        <img src="images/inventory.png">
                        <h2>Powerful Inventory</br>Management</h2>

                    </li>

                </ul>

        </div>

这是CSS

.section-2
{
    width: 100%;
    background-color: #f6f8f8;
    text-align: center;
}
.big-features ul
{
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style: none;

}
.big-features ul li
{
    float: left;
    margin-right: 1.3em; 
    padding: 0;
}
.big-features img
{
    width: 80px;
    padding: 15px 0px 6px 0px;
}
.big-features h2
{
    font-size: 30px;
}

这就是我想要它的样子。

Answer 1

像.big-features ul这样的规则在这里不起作用，因为这会尝试选择<ul>元素，该元素是具有类.big-features的元素的后代。要选择该元素，请使用.big-features或ul.big-features。选择器中的空格意味着寻找后代。

最简单的解决方案是从大多数规则中删除ul：

<强> jsFiddle example

Answer 2

将您的CSS更改为：

.section-2
{
    width: 100%;
    background-color: #f6f8f8;
    text-align: center;
}
ul.big-features 
{
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;

}
ul.big-features li
{
    display: inline-block;
    margin:0 0.7em; 
    padding: 0;
}
ul.big-features img
{
    width: 80px;
    padding: 15px 0px 6px 0px;
}
.big-features h2
{
    font-size: 30px;
}

Answer 3

只需添加：

li{
    float:left;
}

<强> Working Fiddle

Answer 4

您的主要问题是此选择器.big-features ul li。它表示选择li元素作为ul元素的后代， 元素的后代属于big-features

您想要的是ul.big-features li选择li元素，这些元素来自ul，其类别为big-features。

Answer 5

您需要做的就是将display:inline移至li而不是ul标记。

Answer 6

首先，您需要应用display:inline-block和list-style:none 到你的li而不是ul。
css .big-features ul中的第二个意味着，它会搜索ul
parent有一个big-features类（在<。}中不存在你的html），正确的方法是ul.big-features，这意味着ul 具有类大功能的标签

所以你的CSS应该是正确的

ul.big-features
{
    margin: 0;
    padding: 0;


}
ul.big-features li
{

    margin-right: 1.3em; 
    padding: 0;
    display: inline-block;
    list-style: none;
}

看到这个小提琴：http://jsfiddle.net/00kaqz9c/

以div为中心，以div为中心

6 个答案: