CSS 宽度不适用

Question

为什么下面代码的 p 宽度不同？

我试过将它们包裹在 table 中并根据 css width property not applying properly 添加 width:100% 但这没有帮助。

body {
  background-color: aliceblue;
}

p {
  border-radius: 5px;
  background-color: cadetblue;
  font-size: 64px;
  width: 90px;
  text-align: -webkit-center;
  color: white;
  height: 90px;
  display: table-cell;
  vertical-align: middle;
  font-family: helvetica;
}

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>&nbsp;</p>

Answer 1

来自 the specification:

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

基本上您面临的是表的一些默认行为。

这里有一个例子来说明类似的情况：

td {
 width:100px; /* This is restricted by the width of table*/
 border:1px solid;
}

<table>
  <tr>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
<table>
  <tr>
    <td>2</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

而不是表简单地依赖其他东西

body {
  background-color: aliceblue;
}
.container {
  font-size:0; /* remove white space */
  white-space:nowrap; /* Keep one line */
}
p {
  border-radius: 5px;
  background-color: cadetblue;
  font-size: 64px;
  width: 90px;
  text-align:center;
  color: white;
  height: 90px;
  line-height:90px; /*vertical align */
  display:inline-block;
  font-family: helvetica;
}

<div class="container">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>&nbsp;</p>
</div>

Answer 2

如果您想继续使用 table 样式，可以按照您的建议将 table 单元格包裹在 table 中，应用 100% 的宽度并设置table-layout 到 fixed。固定的 table 布局将阻止 table 个单元格的默认自动宽度行为。

body {
  background-color: aliceblue;
}
p {
  border-radius: 5px;
  background-color: cadetblue;
  font-size: 20px;
  width: 90px;
  text-align:center;
  color: white;
  height: 90px;
  display: table-cell;
  vertical-align: middle;
  font-family: helvetica;
}
.table {
  display:table;
  table-layout:fixed;
  width:auto;
}

<div class="table">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>&nbsp;</p>
</div>

CSS 宽度不适用

CSS Width not Applying

css

width