align li标签用css设计

Question

我无法理解为什么我的李漂浮如此：

当我看到JSFIDDLE时，他们对齐了。任何人都可以看到有什么问题吗？

ul {
  counter-reset: section;
  list-style: none;
}
li {
  margin: 0 0 10px 0;
  line-height: 40px;
}
li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;
}
**Updated code to question**

<div id="feature">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

                    <!-- Seminariet bulletpoints -->
                    <h2>PÅ BAGGRUND AF SEMINARIET VIL DU</h2>
                    
                        <ul>
                            <li>First item</li>
                            <li>Second item</li>
                            <li>Third item</li>
                        </ul>
                    
                </div>
            </div>
        </div>
    </div>

**Updated picture**

[![enter image description here][3]][3]

Answer 1

我想问题是你在text-align:center或li上有ul（就我从你的截图中看到的那样，在你的代码中一切都很好）< / p>

因此您希望将li居中。它们保持不变，因为每个li都有不同的文字长度，因此它们在父ul的中心正确对齐

有很多方法可以让它们在中心对齐，也很好地在另一个上面对齐。这将是解决方案之一

编辑以您想要的方式ul居中（没有text-align:center）它有问题，因此您需要使用类似下面的代码段

我认为它会更具响应性。如果没有，您可以随时使用@media query来制作它。看起来不错＆＃39;在较小的设备上

（也做了一些例子@media Queries）

＆＃13;

＆＃13;

ul {
  counter-reset: section;
  list-style: none;
  position:relative;

    padding:0;
    left:45%;
    display:inline-block;
}
li {
  margin: 0 0 10px 0;
  line-height: 40px;



}
li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;
 
 
}
h2 { 
text-align:center;
}
@media only screen and (max-width: 640px) {
ul {
  left:40%;
}

}
 @media only screen and (max-width: 425px) {
ul {
  left:35%;
}

}
 @media only screen and (max-width: 320px) {
ul {
  left:25%;
}

}

＆＃13;

<div id="feature">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title">

                    <!-- Seminariet bulletpoints -->
                    <h2>PÅ BAGGRUND AF SEMINARIET VIL DU</h2>
                    <div style="border: 1px solid black;">
                        <ul style="text-align:left">
                            <li>First item</li>
                            <li>Second item</li>
                            <li>Third item</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;