内容居中和左对齐的两列布局

Question

我想创建一个两列列表。其中内容宽度基于最大元素，然后左对齐并居中。

它看起来像那样。代码类似这样

<div class="grid">
  <div class="radio">
    <input type="radio">
    <label>United States</label>
  </div>
    <div class="radio">
    <input type="radio">
      <label>Canada</label>
  </div> 
  <div class="radio">
    <input type="radio">
    <label>Brazil</label>
  </div>
    <div class="radio">
    <input type="radio">
      <label>Argentina</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Peru</label>
  </div> 
  <div class="radio">
    <input type="radio">
  <label>Ivory Coast</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Really Long Content</label>
  </div>
    <div class="radio">
    <input type="radio">
      <label>Guatamala</label>
  </div>
</div>

Answer 1

您可以在以下位置使用 width:max-content 和 margin:auto：

一个grid

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: max-content;
  margin: auto;
  border: solid;
  gap: 0 1em;
}

.radio {
  box-shadow: 0 0 0 1px;
}

<div class="grid">
  <div class="radio">
    <input type="radio">
    <label>United States</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Canada</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Brazil</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Argentina</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Peru</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Ivory Coast</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Really Long Content</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Guatamala</label>
  </div>
</div>

或通过 column-count:2;

.grid {column-count:2;
 -webkit-column-gap: 1em; /* Chrome, Safari, Opera */
    -moz-column-gap: 1em; /* Firefox */
  column-gap: 1em;
  width:max-content;
  margin:auto;
  border:solid;
}

.radio {
  box-shadow: 0 0 0 1px;
}

<div class="grid">
  <div class="radio">
    <input type="radio">
    <label>United States</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Canada</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Brazil</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Argentina</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Peru</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Ivory Coast</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Really Long Content</label>
  </div>
  <div class="radio">
    <input type="radio">
    <label>Guatamala</label>
  </div>
</div>

在演示的列之间添加了 1em 的间距。

内容居中和左对齐的两列布局

Two Column Layout with centered and left aligned content

css

grid