列表和div以及如何使它们在彼此旁边/下方对齐

Question

我有以下代码：

＆＃13;

＆＃13;

.date {
  float: left;
  border: 1px white solid;
  text-align: left;
}

.text {
  float: left;
  text-align: left;
  margin: 7px;
/*    color: white; */ /* Removed for the snippet */
  border: 1px white solid;
}

＆＃13;

<ul>
  <ol>
    <div class="date">
      <span>Feb 24 1955</span>
    </div>
    <div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
    </div>
  </ol>
  <ol>
    <div class="date">
      <span>1969</span>
    </div>
    <div class="text">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
    </div>
  </ol>

  <ol>
    <div class="date">
      <span>1974</span>
    </div>
    <div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his college friend Dan Kottke
    </div>
  </ol>

  <ol>
    <div class="date">
      <span>April 1 1976</span>
    </div>
    <div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
    </div>
  </ol>

＆＃13;

＆＃13;

＆＃13;

我希望显示器显示为（没有子弹点）

• 日期文字
• 日期文字

但是现在它显示为Date Text Date Text

我认为如果我没有使用div而只使用ol它可能会有用，但我想练习使用div并了解定位在CSS中的工作原理。

Answer 1

首先，将ol替换为li。 ol表示有序列表，而li表示列表项。不要混淆两者。 ul和ol必须包含li。

对于您的问题，我建议使用灵活方案解决方案：

＆＃13;

＆＃13;

ul {
  list-style: none;
  width: 100%;
}

li {
  width: 100%;
  display: flex;
  margin:  5px;
  box-sizing: border-box;
}

.date {
  width: 25%;
  align-self: center;
}

.text {
  flex: 1;
}

＆＃13;

<ul>
  <li>
    <div class="date">
      <span>Feb 24 1955</span>
    </div>
    <div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
    </div>
  </li>
  <li>
    <div class="date">
      <span>1969</span>
    </div>
    <div class="text">Steve Jobs meets Steve Wozniak, 5 years lider, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
    </div>
  </li>
  <li>
    <div class="date">
      <span>1974</span>
    </div>
    <div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his clilege friend Dan Kottke
    </div>
  </li>

  <li>
    <div class="date">
      <span>April 1 1976</span>
    </div>
    <div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
    </div>
  </li>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需要浮动.date，然后.text将环绕它。您的HTML无效。 ul不能将ol作为直接子项。那应该是li。

.date {
  float: left;
  margin: 0 1em 0 0;
}

li {
  margin: 0 0 1em;
  list-style: none;
}

<ul>
    <li>
      <div class="date">
        <span>Feb 24 1955</span>
      </div>
      <div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
      </div>
    </li>
    <li>
      <div class="date">
        <span>1969</span>
      </div>
      <div class="text">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
      </div>
    </li>

    <li>
      <div class="date">
        <span>1974</span>
      </div>
      <div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his college friend Dan Kottke
      </div>
    </li>

    <li>
      <div class="date">
        <span>April 1 1976</span>
      </div>
      <div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
      </div>
    </li>
  </ul>