Question

希望你们和女孩们可以帮助我。我希望所有列表项在左侧对齐相同（例如，参见图像）

这是我的代码

＆＃13;

.feature-stack {
  margin: 100px 0 0 0;
  border: solid 3px;
}

.features ul.features-stack {
  margin-top: 50px;
}

.features ul.features-stack ul {}

.features ul.features-stack li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.feature-content ul li {
  list-style-type: none;
}

＆＃13;

<ul class="features-stack">

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polyethene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Other virgin plastic</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polypropylene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

</ul>

＆＃13;

所以我希望它们对齐并且圆圈消失了。希望我已经给了你们足够的信息，否则请告诉我，这样我就能给你更多的信息。

谢谢

Answer 1

添加ul {list-style-type:none;}可以解决问题：

ul {
  list-style-type:none;
}

.feature-stack {      
  margin: 100px 0 0 0;
  border: solid 3px;
}

.features ul.features-stack {
  margin-top: 50px;
}

.features ul.features-stack ul {}

.features ul.features-stack li:last-child {
  padding-bottom: 0px;
  border-bottom: none;
}

.feature-content ul li {
  list-style-type: none;
}

<ul class="features-stack">

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polyethene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Other virgin plastic</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

  <li class="feature-item">
    <div class="feature-content">
      <h5>Polypropylene</h5>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
      <li>Test Test</li>
    </div>
  </li>

</ul>

Answer 2

您可以将以下css添加到样式表中：

 ul {
    list-style: none;
}

.Heading {
    font-size: 20px;
    font-weight: bold;
}

在HTML中，只需用标签标签（li）替换标题标签（H5）。请在下面找到代码：

<ul class="features-stack">

                        <li class="feature-item">
                            <div class="feature-content">
                                <li class="Heading">Polyethene</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li> 
                            </div>
                        </li>
                <br/>
                        <li class="feature-item">
                            <div class="feature-content">                                    
                                <li class="Heading">Other virgin plastic</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                            </div>
                        </li>
                   <br/>
                        <li class="feature-item">
                            <div class="feature-content">                                   
                                <li class="Heading">Polypropylene</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                                    <li>Test Test</li>
                            </div>
                        </li>

                    </ul>

我已经测试了上面的代码并且工作正常。

列表项不会对齐

2 个答案: