怎么做<ul><li>结构化

Question

Q.1) 我的 ul li 结构如下

<ul class="service">
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>

        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
        <li>
            <ul class="service-sub">
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li>
                <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li>
            </ul>
        </li>
    </ul>

我写在CSS下面； 但没有得到确切的输出。

.service{width: 100em;}
.service li {display: inline-block; float: left; width: 10em; padding-left: 10px; margin-left: 10px;}
.service-sub li span:first-child{width:10px;}

我需要如下图所示的输出。

Q.2) 我还想创建如图所示的 ul li 结构。

为此，我编写了以下 CSS，但我不知道如何创建黄色部分。

.reseda-autommotive-img li {display:inline-block; border: 2px solid red; background-color: #252324; width: 100px; height: 100px; margin-left: 25px; } 

Answer 1

对于您问题的第一部分，我复制了您的代码并将其添加到 css 中，现在它应该看起来像您发布的图像：

 .service { width: 100em; } .service li { display: inline-block; float: left; width: 12em; padding-left: 10px; margin-left: 10px; } .service-sub li span:first-child { width: 10px; } img { padding-right:15px; }

 <ul class="service"> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> <li> <ul class="service-sub"> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Acura Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Chrysler Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Honda Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Jeep Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Mercedes-Benz Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Porche Repair</li> <li><span><img src="http://localhost/demo/wp-content/uploads/2016/09/serimg-1.png" alt="serimg" width="24" height="18" class="alignnone size-full wp-image-1139"></span>Subaru Repair</li> </ul> </li> </ul>

对于您问题的第二部分，我做了这个（运行代码段时看起来很糟糕，但是当您展开它时，它看起来像图像）。 你需要自己添加图片JSFIDDLE

 .repair, .trusted, .expertise, .low-cost { width: 150px; height: 150px; display: inline-block; background-color: black; margin: 20px; border: 2px solid red; } .red { width: 100px; height: 40px; display: inline-block; background-color: red; margin-left: 25px; margin-top: -20px; text-align: center; } .yellow { width: 750px; height: 120px; border: 2px solid yellow; border-radius: 50%; margin-top: 40px; margin-bottom: -85px; margin-left: 20px; z-index: 99; position: relative; }

 <div class="yellow"> </div> <div class="repair"> <div class="red"> <p>Repair</p> </div> </div> <div class="trusted"> <div class="red"> <p>Trusted</p> </div> </div> <div class="expertise"> <div class="red"> <p>Expertise</p> </div> </div> <div class="low-cost"> <div class="red"> <p>Low Cost</p> </div> </div>