Question

我的问题很简单，但我无法弄清楚如何做到这一点。我有一个div，在里面，我显示一些信息。基本上，这样的事情：

title1:         20
title2:         30

我想让标题左对齐，右边的数字对齐。我是这样做的http://jsfiddle.net/MmLQL/34/。正如你所看到的，我在数字和标题之间有一个换行符（我相信它来自h标签的使用）。但事情是，即使我使用span标签，它应该显示元素内联并且不强制断行，我会丢失text-align右/左选项。这是一个例子：http://jsfiddle.net/MmLQL/35/

Answer 1

我会使用float param执行此操作。像这样：http://jsfiddle.net/dan1410/MmLQL/38/

Answer 2

您应该尝试使用“float：”：

.container {
    width: 100%; 
    clear: both;
}
.title {
    float:left ; 
    display: inline;
}

.number {
    float: right;
}

<div >
    <div class="container">
        <div class="title">title:</div>
        <div class="number">number </div>
    </div>
    <div class="container">
        <div class="title">title:</div>
        <div class="number">number </div>
    </div>
</div>

Answer 3

试试这个，http://jsfiddle.net/MmLQL/36/，

<强> HTML

<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>
<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>
<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>
<div >
     <h3>number </h3>
    <h2 >title: </h2>
</div>

<强> CSS

h2 {text-align:left}

h3 {
    text-align: right;
    float:right;
}

你可能不得不在div上使用float-clear，这应该有帮助，http://www.positioniseverything.net/easyclearing.html，

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

..并将div修改为class =“clearfix”。

Answer 4

我认为以下内容应该可行，使用内联块来调整标题的布局，然后在左对齐的一个浮点上确保它与正确的坐标相对应。

div { width: 100%; }
h2 {
  width: 50%;
  display: inline-block;
  float: left;
}

h3 {
  display: inline-block;
  width: 50%;
  text-align: right;
}

Answer 5

您也可以使用CSS table / table-cells

<div class="container">
     <h2>title: The Title</h2>
     <h3>number</h3>
</div>

CSS：

.container {
    border: 1px solid gray;
    display: table;
    width: 400px; /* set to 100% if full width */
}
h2 {
    text-align:left;
    display: table-cell;
}
h3 {
    text-align: right;
    display: table-cell;
}

请参阅演示http://jsfiddle.net/audetwebdesign/pcZaq/

如果需要对垂直对齐进行一些控制，这种方法很有用。

此外，表格单元格将始终保持在一条线上，这与浮点线或内联块不同，后者可以为小屏幕尺寸换行到第二行。

选择部分取决于您希望布局如何以响应方式运行。

Answer 6

而不是其他答案中提供的所有hacky解决方案，看起来您想要对齐表格数据。在这种情况下，您应该使用表格。

显示：table-cell实际上只存在于CSS中以给出实际元素，而它的子节点是它们的样式。它不应该用于让非表元素表现得像表元素。至少，imho。

Float：左边似乎是一个不错的选择，如果你只是想要对齐元素的布局。

如果您的数据实际上是表格数据，那么请使用表格。它解决了你的问题，同时更具语义性。

问题与CSS对齐

6 个答案: