我需要什么 CSS 才能让这个 html 像在原文中那样出现？

Question

我想表示一个包含两列的列表（两个虚构的棒球队），因为它出现在原文中，如下所示：

这是它目前的实际情况（如您所见，比一袋烟头丑 9 倍）：

你可以在 jsfiddle 看到它 "live" here；它在末尾 - 在第 41 章中。您可以滚动到末尾，或者通过选择第 XVI 章从 TOC 到达那里 link。

这是我的 HTML:

<p class="marginalize">     BESSEMERS                   ULSTERS</p>

<p class="marginalize">   KING ARTHUR.                EMPEROR LUCIUS.</br>
   KING LOT OF LOTHIAN.        KING LOGRIS.</br>
   KING OF NORTHGALIS.         KING MARHALT OF IRELAND.</br>
   KING MARSIL.                KING MORGANORE.</br>
   KING OF LITTLE BRITAIN.     KING MARK OF CORNWALL.</br>
   KING LABOR.                 KING NENTRES OF GARLOT.</br>
   KING PELLAM OF LISTENGESE.  KING MELIODAS OF LIONES.</br>
   KING BAGDEMAGUS.            KING OF THE LAKE.</br>
   KING TOLLEME LA FEINTES.    THE SOWDAN OF SYRIA.</p>

<p class="marginalize">                  Umpire--CLARENCE.</p>

这里是 CSS:

.marginalize {
    margin-left: 5em;
    margin-right: 5em;
    color: antiquewhite;
}

我不希望它看起来像table，即使我必须使用table；这是解决这个问题的方法吗（表格化，无边界）？

Answer 1

尝试使用 class 边缘化 ()] 将每一列包装在 div 中。在代码编辑器中划分内容是不一样的，因为空格被忽略。所以对于每一列，您必须定义一列。这可以用两个 div 来完成，一个 table 有 2 列等等等等

Answer 2

   <div class='bessemers'>
         <h1>your heading</h1>
          <ul class="float-l">
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
      </ul>
         <h1>your heading</h1>
      <ul class="float-r">
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
         <li>your text name</li>
      </ul>
   </div>
      <div class="umpire">
         <h1>heading</h1>
      </div>

Answer 3

您可以将 <p> 标签更改为 <pre> 标签，它会保留空格。另外，你的换行符应该是 <br/> 而不是 </br>

body {
    background:black;
}
.marginalize {
    margin-left: 5em;
    margin-right: 5em;
    color: antiquewhite;
}

<pre class="marginalize">     BESSEMERS                   ULSTERS</pre>

<pre class="marginalize">   KING ARTHUR.                EMPEROR LUCIUS.
   KING LOT OF LOTHIAN.        KING LOGRIS.
   KING OF NORTHGALIS.         KING MARHALT OF IRELAND.
   KING MARSIL.                KING MORGANORE.
   KING OF LITTLE BRITAIN.     KING MARK OF CORNWALL.
   KING LABOR.                 KING NENTRES OF GARLOT.
   KING PELLAM OF LISTENGESE.  KING MELIODAS OF LIONES.
   KING BAGDEMAGUS.            KING OF THE LAKE.
   KING TOLLEME LA FEINTES.    THE SOWDAN OF SYRIA.</pre>

<pre class="marginalize">                  Umpire--CLARENCE.</pre>

Answer 4

这对我来说似乎应该是 table。或者至少有两个浮动列表，如 kaushik dey 的回答。

body{
 background-color:black;}
.marginalize {
 width:550px;
    color: antiquewhite;
 border:none;
 border-collapse:collapse;
 padding:0;
 margin:0 auto;
}
.marginalize td {
 padding:.2em .5em;
}
.marginalize tfoot td, .marginalize th {
 text-align:center;
 padding:1em 0;
 font-weight:normal;
}

<table class="marginalize">
  <tbody>
    <tr>
      <th>BESSEMERS</th>
      <th>ULSTERS</th>
    </tr>
    <tr>
      <td>KING LOT OF LOTHIAN.</td>
      <td>KING LOGRIS.</td>
    </tr>
    <tr>
      <td>KING OF NORTHGALIS.</td>
      <td>KING MARHALT OF IRELAND.</td>
    </tr>
    <tr>
      <td>KING MARSIL.</td>
      <td>KING MORGANORE.</td>
    </tr>
    <tr>
      <td>KING OF LITTLE BRITAIN.</td>
      <td>KING MARK OF CORNWALL.</td>
    </tr>
    <tr>
      <td>KING LABOR.</td>
      <td>KING NENTRES OF GARLOT.</td>
    </tr>
    <tr>
      <td>KING PELLAM OF LISTENGESE.</td>
      <td>KING MELIODAS OF LIONES.</td>
    </tr>
    <tr>
      <td>KING BAGDEMAGUS.</td>
      <td>KING OF THE LAKE.</td>
    </tr>
    <tr>
      <td>KING TOLLEME LA FEINTES.</td>
      <td>THE SOWDAN OF SYRIA.</td>
    </tr>
  </tbody>
  <tfoot>
      <tr>
      <td colspan="2">Umpire--CLARENCE.</td>
    </tr>
</tfoot>
</table>

我需要什么 CSS 才能让这个 html 像在原文中那样出现？

What CSS do I need to get this html to appear as it does in the original text?

html

css

html-table