Question

我遇到了一个似乎无法找到解决方案的问题。我正在尝试使两个标签水平排列。每个人都会拥有一个清单。

我想移动红色框，使其与蓝色框对齐。 Move red box 我还需要列表居中位于框中间（行所在的位置）我试图以多种方式对齐框，其中之一包括“ float：left;”。似乎要做的就是在框中添加一些填充。

我也尝试过使用绝对值和相对位置，但是它要么缩放得不好，要么没有对齐。

关于文本居中，我尝试了许多方法。我尝试使用“ text-align：center;”但这并没有改变点。单词在蓝色的一面也奇怪地对齐。我也尝试使用“ margin-left：％50;”。但这并不能使其居中完美，而是将其偏右。

我当前的代码如下：

#list {
  background: blue;
  width: 50%;
}

#list2 {
  background: red;
  width: 50%;
  margin-left: 50%;
}

#ingredients {
  text-align: center;
}

#equipment {
  text-align: center;
}

<html>
  <body>

    <div id="list">
      <h3 id="ingredients">Ingredients</h3> 

      <ol>
        <li>Bread</li>
        <li>Some sort of spread (examples below)
          <ul>
            <li>Nutella</li>
            <li>Penut butter</li>
            <li>Jelly</li> 
         </ul>
        </li>
       <li>Some common sense</li>
       </ol>
    </div>

    <div id="list2">
      <h3 id="equipment">Equipment needed</h3>
      <ul> 
        <li>A toster or toser oven</li>
        <li>A knife to spread your spread</li>
      </ul>
    </div>

  </body>
</html>

非常感谢您的帮助！谢谢， -莱利

Answer 1

我绝对建议您考虑使用CSS Grid。太棒了。

编辑：如果您要拒绝我的回答，请至少花点时间说出您这样做的原因。据我所见（并形成OP的答复），我正在回答他的问题。

* {
  color: #666;
  font-family: sans-serif;
  }

#list {
  border: 2px solid red;
  }

.page-grid {
  display: grid;
  grid: 1fr / 1fr 1fr;
}
.grid-row-1 {
  display: grid;
  grid: 1fr /1fr;
  justify-items: center;
  align-items: start;
  background-color: #dadada;
  border: 2px solid blue;
}
.grid-row-2 {
  display: grid;
  grid: 1fr /1fr;
  justify-items: center;
  align-items: start;
  background-color: #ececec;
  border: 2px solid blue;
}

<html>

<body>
  <div class="page-grid">
    <div class="grid-row-1">

      <div id="list">
        <h3 id="ingredients">Ingredients</h3>
        <ol id="test">
          <li>Bread</li>
          <li>Some sort of spread (examples below)
            <ul>
              <li>Nutella</li>
              <li>Penut butter</li>
              <li>Jelly</li>
            </ul>
          </li>
          <li>Some common sense</li>
        </ol>
      </div>
    </div>
    <div class="grid-row-2">
      <div id="list">
        <h3 id="equipment">Equipment needed</h3>
        <ul id="test2">
          <li>A toaster or toaster oven</li>
          <li>A knife to spread your spread</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

两个html和css元素需要水平排列

1 个答案: