5

在许多沉重而严肃的书籍中，尤其是由英国著名的英国女王陛下文具办公室(HMSO) 出版的书籍中，人们会看到大量的表格。

通常，如果列包含数字数据，它不仅在列中居中，而且在该中心点右对齐，这样数字的最后一位就是居中的实体。这种布局可能是由 HMSO 样式规则决定的。

我碰巧有第 336 页的二战历史 - 英国军事系列 - 海上战争 1939-1945 - 第 I 卷 - 防御，我在上面找到了与上述描述相符的表格。

使用老式凸版印刷，甚至在热金属中，无可否认，它完全是手工的和乏味的，但相对简单——只需使用或多或少的引导直到它排成一行。

但我想知道是否可以使用 Microsoft Word和/或HTML/CSS 来完成，最好两者兼而有之。

4

2 回答 2

5

这可以在 HTML/CSS 中通过使用居中的 inline-block 元素包装文本来实现：

.wrap {
  text-align:right;
  border: 3px dotted blue;  
  display: inline-block;
}
.container {
  border: 10px solid red;
  text-align: center;
}
<div class="container">
  <div class="wrap">
    Line 1 asddsa<br>
    Line 2 asdasdf<br>
    Line 3 asdfasdfasdf<br>
    Line 4 dsdf<br>
    Line 5<br>
    Line 6 s
  </div>
</div>

于 2017-02-01T02:53:23.927 回答
0

丰富@casgage 的答案：如果您尝试对同一个表中的不同行执行此操作（即，值位于同一列的不同单元格中），则需要为.wrap该类设置一个最小宽度值。min-width 必须是使所有包装容器大小相同的值。使用其他答案中的示例：

.wrap {
    text-align: right;
    border: 2px dotted blue;
    display: inline-block;
    min-width: 150px;
}
.container {
    border: 2px solid red;
    text-align: center;
    min-width: 500px;
    padding: 5px;
}

<table>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 1 asddsa
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 2 asdasdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 3 asdfasdfasdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 4 dsdf
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 5
            </div>
        </td>
    </tr>
    <tr>
        <td className="container">
            <div className="wrap">
                Line 6 s
            </div>
        </td>
    </tr>
</table>
于 2019-12-09T19:39:38.823 回答