正确对齐表格单元格中元素之间的间距答案

【问题标题】：Properly align spacing between elements in a table cell正确对齐表格单元格中元素之间的间距
【发布时间】：2015-10-14 04:52:06
【问题描述】：

我试过搜索，但我不知道该怎么称呼它。我正在尝试完成这张图片中左侧的内容：

但是，当我更改页面的宽度时，它会折叠并导致不良行为。

我将 margin-left: 50px; float:left 用于插入符号，margin-right: 50px 用于文本。

http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="table table-bordered text-center">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td><i class="fa fa-caret-up" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">2332</span></td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td style="width: 300px"><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

有没有更好的方法不折叠？

【问题讨论】：

标签： html css twitter-bootstrap html-table

【解决方案1】：

尝试以下操作：http://jsfiddle.net/jLod5cv9/。单元格的每个元素都设置为inline-block 和white-space: nowrap 声明应该将它们放在一起。

HTML：

<table>
    <tr><td class = "up" data-number = "3"></td></tr>
    <tr><td class = "down" data-number = "-55"></td></tr>
    <tr><td class = "down" data-number = "-44"></td></tr>
    <tr><td class = "up" data-number = "1"></td></tr>
    <tr><td class = "up" data-number = "65"></td></tr>
</table>

CSS：

table {
    border-collapse: collapse;
}

table td {
    white-space: nowrap;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: green;
}

table td.down {
    color: red;
}

table td:after {
    content: attr(data-number);
    display: inline-block;
    font: normal 12px/1 Sans-Serif;
    width: 25px;
    text-align: center;
}

table td:before {
    content: "";
    display: inline-block;
    border-style: solid;
    border-width: 0px 4px 5px 4px;
    border-color: transparent transparent green transparent;
    margin-right: 15px;
}

table td.down:before {
    border-width: 5px 4px 0 4px;
    border-color: red transparent transparent transparent;
}

【讨论】：

【解决方案2】：

布局问题是由于您的浮动元素（插入符号）造成的。如果您的页面宽度缩小，那么您的 HTML 表格的列也会缩小，并可能导致您的元素换成两行。

我要做的是将插入符号和数字包装在一个 div（HTML 表格）中，然后将插入符号和数字放在一个单独的跨度（HTML 表格单元格）中。结果是插入符号和数字将始终在一行上，并且您可以控制垂直对齐和间距（使用填充）。

.tablecell {
  border: 1px dotted blue;
  display: table-cell;
}
.table {
  display: table;
  width: 100px; /* optional */
}
.table span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  width: 50%;
}
.table span.left {
  text-align: right;
  padding-right: 5px;
}
.table span.right {
  text-align: left;
  padding-left: 5px;
}

<div class="tablecell">
  <div class="inner table">
    <span class="left">x</span> 
    <span class="right">21</span>
  </div>
</div>

【讨论】：

【解决方案3】：

我找不到将它完全放在中间的方法，主要是因为您的数字总是会改变。有时你会有 4 个，有时是 2 个，所以完全按照你在顶部提供的方式获得它不会发生。但是，如果你得到的数字大多是相同的，比如 2，那么我在此处发布的方式将起作用 http://plnkr.co/edit/vQeSURKTVyoeaj6MqsxX?p=preview 。我在 html 中取出了你的硬代码并使用了直接的 css。

css:
/* Styles go here */
tbody tr td { width: 33%;}
tbody tr td:nth-child(4) { width:33%;}
tbody tr td i { width:50%; text-align:right; margin-right:10px;}
tbody tr td span { width:50%; text-align:left;}

html:

<body>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Money</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><i class="fa fa-caret-up" ></i><span>2332</span></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><i class="fa fa-caret-down"></i><span>1.2</span></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><i class="fa fa-caret-down"></i><span>1.2</span></td>
    </tr>
  </tbody>
</table>

nth-child 是为了以防万一您想更改某些 td 容器，例如颜色或宽度。

【讨论】：

【解决方案4】：

当使用边距时，您告诉页面在那里有一个定义的边距。如果没有足够的空间水平显示所有部分，则插入换行符，是什么导致您的奇怪视图。也许this 可以帮到你。

【讨论】：

我没有投反对票，谢谢你的链接。我只是想让文本 x 像素远离其右侧的文本，但每行的 x 应该始终相同。