Question

Q.1）我的结构如下

.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;}

我在CSS下面写了;但没有得到准确的输出。

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

我需要输出如下图所示。

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

为此，我写了下面的CSS，但我无法得到如何创建黄色部分。

`<label class="radio-inline"><input type="radio" disabled="true" id="ojtm.inform_infoy" name="ojtm.inform_info" path="ojtm.inform_info" value="Y">Yes</label>`
....
<script>
        $(document).ready(function() {
        $("#ojtm.inform_infoy").click(function(event) { 
        console.log("ojtm.inform_infoYY is clicked: ");
        //trying to do something                            
    });                     
});
</script>

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>

如何使<ul> <li>成为结构化的

1 个答案: