Question

所以现在我的列表项位于页面的中心，但是看起来很草率，因为点彼此不对齐。我只是想知道我该怎么做。这是一个代码段：

HTML

<div id="list">
        <li>February 24, 1955: A Star was born. Jobs steps on the scene.</li>
        <li>1970: A friendship blossums. Steve Meets Steve Wozniac the soon to be co-founder of Apple.</li>
        <li> September 18th, 1972: Steve would graduate from highschool and enter college only to leave a semester later. He would continue to sit in on classes, most likely trying to get ideas for his soon to be built company.</li>
        <li>January 3, 1977: Apple incorporates.
</li>
        <li>December 12, 1980: Apple goes public. It's estimated that Jobs is worth 200 million at this point in his career.</li>

CSS：

#list {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: grey;
  length: 150px;
  font-size: 22px;
  width: 100%;

}

li {


  text-align: center;

}

Answer 1

您不需要flexbox。只需删除您设置的两个text-align: center规则。

也删除length: 150px； length无效的属性。除此之外，<div>是<li>中的not a valid parent；您将需要<ul>或<ol>。 <menu>以及过期的标签<dir>也是有效的。

这可以在下面看到：

#list {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: grey;
  font-size: 22px;
  width: 100%;
}

<ul id="list">
  <li>February 24, 1955: A Star was born. Jobs steps on the scene.</li>
  <li>1970: A friendship blossums. Steve Meets Steve Wozniac the soon to be co-founder of Apple.</li>
  <li> September 18th, 1972: Steve would graduate from highschool and enter college only to leave a semester later. He would continue to sit in on classes, most likely trying to get ideas for his soon to be built company.</li>
  <li>January 3, 1977: Apple incorporates.</li>
  <li>December 12, 1980: Apple goes public. It's estimated that Jobs is worth 200 million at this point in his career.</li>
</ul>

将列表项均匀居中对齐

1 个答案: