<fieldset> 样式不起作用[重复]答案

【问题标题】：<fieldset> styling not working [duplicate]<fieldset> 样式不起作用[重复]
【发布时间】：2018-03-30 20:33:08
【问题描述】：

样式 <fieldset> 工作异常。在 Google Chrome 中，div 适合内容。

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
}

<fieldset class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</fieldset>

而我想要的是

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
}

<div class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</div>

如何设置<fieldset> 的样式，使其看起来像后一个？

【问题讨论】：

stackoverflow.com/questions/9203561/…
将宽度（比如宽度：100px;）添加到字段集单元格类将给出你想要的。但我仍在试图理解为什么 width : 33%;没有影响

标签： html css

【解决方案1】：

当您将字段集的宽度设置为 100% 时，您将字段集的边框宽度设置为 100%。它不会改变其中 div(s) 的宽度。因此，您需要设置 fieldset 标记内的 div(s) 的样式。

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
  width: calc(100vw * 1/3);
}

<fieldset class="table">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</fieldset>

【讨论】：

当然是最好的解决方案
感谢您的评论。

【解决方案2】：

我意识到将字段集单元格 div 浮动在另一个 div 中可以到达那里

 .table {
 border: none;
 border-collapse: collapse;
 display: table;
 margin: 0;
 padding: 0;
 table-layout: fixed;
 }

 .father{
 width: 100%;
 height: 50px;
 }

 .cell {
 background: #ccc;
 border: 1px solid black;
 display: table-cell;
 width: 30%;
 height: 50px;
 float: left;
 }

 <fieldset class="table">
     <div class="father">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
     </div>
 </fieldset>

【讨论】：

【解决方案3】：

.table {
  border: none;
  border-collapse: collapse;
  display: table;
  margin: 0;
  min-width: auto;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}

.cell {
  background: #ccc;
  border: 1px solid black;
  display: table-cell;
  height: 50px;
  padding-right: 31em;
}

<fieldset class="table">
  <div class="cell">1</div>
   <div class="cell">2</div>  
   <div class="cell">3</div>
</fieldset>

【讨论】：