时间戳

首页 > 解决方案 > CSS 宽度不适用

css - CSS 宽度不适用

问题描述

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

我尝试将它们包装在一个表格中并width:100%根据css width 属性添加未正确应用，但这没有帮助。

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>

标签： csswidth

解决方案

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

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>

推荐阅读