Question

我已经看到了一些与此类似的问题，但大多数人似乎缺乏彻底显示问题所在的图像。

我正试图让以下响应式布局在狭窄时工作。它现在看起来像这样：

enter image description here

这就是我想要它的样子。请注意，字段和标签的左边缘彼此对齐，但它们一起相对于其他所有内容都居中。

enter image description here

最后，当父div为宽时（这是有效的），这就是它的样子：

enter image description here

这是我的代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style type="text/css">
    .CalibrationPointStep {
      text-align: center;
    }

    .CalibrationPointStep > .table {
      display: table;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }

    .CalibrationPointStep > .table > .raw {
      margin-right: 15px;
      margin-bottom: 10px;
    }

    .CalibrationPointStep > .table > .raw,
    .CalibrationPointStep > .table > .actual {
      display: inline-block;
    }

    .CalibrationPointStep > .table > .raw > .header,
    .CalibrationPointStep > .table > .actual > .header {
      text-align: left;
      display: block;
      font-weight: bold;
    }

    .CalibrationPointStep > .table > .raw > .value {
    .CalibrationPointStep > .table > .actual > .value {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="CalibrationPointStep">
    <h3>Step 1</h3>
    <p>Go to a known low state, and enter the actual value.</p>
    <div class="table">
      <div class="raw">
        <div class="header">Raw Value</div>
        <div class="value">
          <input type="number" readOnly /> counts
        </div>
      </div>
      <div class="actual">
        <div class="header">Actual Value</div>
        <div class="value">
          <input type="number" /> kips
        </div>
      </div>
    </div>
  </div>
</html>

请注意，如果我从text-align: left删除.CalibrationPointStep > .table，它看起来像这样，我也不想要：

enter image description here

似乎问题是当其中一个内联块div必须换行时，父div的宽度会截断到可用的最大值，而不是跨越其子节点的最小宽度。

如果可能，我想要一个适用于IE8 +的解决方案。但如果这不可能，我仍然对更现代浏览器的解决方案感到好奇。

Answer 1

试试这个：

.CalibrationPointStep {
    text-align: center;
}
.raw,
.actual {
    width: 200px;
    display: inline-block;
}
.header,
.value {
    text-align: left;
}
.header {
    font-weight: bold;
}
input {
    margin-left: 0;
}

here

此外，在实际项目中，您不希望堆积元素的所有CSS选择器，因为它会使您的CSS不必要地复杂化，因此难以组织和维护。在大多数情况下，选择一个最合适的描述性课程就足够了。

如何“左中心”对齐div中的包含内联块

1 个答案: