Question

<div class="container"



    <h3>Note template</h3>

所以下面这两个“s”就是我想要并排放置的。我尝试过使用float，display：inline-block，但我似乎无法弄明白。

    <p>
        <ul>
            <li>Name: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li>
        </ul>

    <h3>Note Template(Other)</h3>
        <ul>
            <li>Name: </li>
            <li>Primary Contact: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Primary Phone#: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li>
        </ul>
    </p>
</div>

Answer 1

将每个标题和列表包装在一起，并使.container成为Flexbox或网格容器。

网格示例：已添加类.grid

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

<div class="container grid">
  <div>
    <h3>Note template</h3>
    <ul>
      <li>Name: </li>
      <li>Account#: </li>
      <li>Meter: </li>
      <li>Phone: </li>
      <li>Issue: </li>
      <li>Resolution: </li>
      <li>KB: None</li>
    </ul>
  </div>
  <div>
    <h3>Note Template(Other)</h3>
    <ul>
      <li>Name: </li>
      <li>Primary Contact: </li>
      <li>Account#: </li>
      <li>Meter: </li>
      <li>Phone: </li>
      <li>Primary Phone#: </li>
      <li>Issue: </li>
      <li>Resolution: </li>
      <li>KB: None</li>
    </ul>
  </div>
</div>

Answer 2

你去吧

https://jsfiddle.net/jfn605gp/

<div class="container" style="width: 100%; display: table;">


  <div style="display: table-row">
    <div style="width: 50%; display: table-cell;">


      <h3>Note template</h3>


      <ul>
        <li>Name: </li>
        <li>Account#: </li>
        <li>Meter: </li>
        <li>Phone: </li>
        <li>Issue: </li>
        <li>Resolution: </li>
        <li>KB: None</li>
      </ul>
    </div>

    <div style="display: table-cell;">
      <h3>Note Template(Other)</h3>
      <ul>
        <li>Name: </li>
        <li>Primary Contact: </li>
        <li>Account#: </li>
        <li>Meter: </li>
        <li>Phone: </li>
        <li>Primary Phone#: </li>
        <li>Issue: </li>
        <li>Resolution: </li>
        <li>KB: None</li>
      </ul>
    </div>
  </div>
</div>

Answer 3

最简单的方法：

<html>
<head>
<style>
.container{ 
width: 100%;
display: flex;
}
.c1{
 width: 50%;

 }
.c2{
 width: 50%;
 }
 </style>
</head>

<body>
<div class="container">
<div class="c1">
    <h3>Note template</h3>
        <ul>
            <li>Name: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li>
        </ul>
</div>
<div class="c2">
    <h3>Note Template(Other)</h3>
        <ul>
            <li>Name: </li>
            <li>Primary Contact: </li>
            <li>Account#: </li>
            <li>Meter: </li>
            <li>Phone: </li>
            <li>Primary Phone#: </li>
            <li>Issue: </li>
            <li>Resolution: </li>
            <li>KB: None</li> 
        </ul>
</div>
</div>
</body>
</html>

如何使用CSS将这两个无序列表并排放置？

3 个答案: