0

我的问题很简单，但我不知道该怎么做。我有一个 div 并在其中显示一些信息。基本上，是这样的：

title1:         20
title2:         30

我希望标题左对齐，数字右对齐。这是我的做法http://jsfiddle.net/MmLQL/34/。如您所见，我在数字和标题之间有一个换行符（我相信这来自于 h 标签的使用）。但问题是，即使我使用了一个应该内联显示元素并且不强制换行的 span 标签，我也会失去 text-align right/left 选项。这是一个例子：http: //jsfiddle.net/MmLQL/35/

4

6 回答 6

1

我会做这个float参数。像这样：http: //jsfiddle.net/dan1410/MmLQL/38/

于 2013-09-25T15:00:10.907 回答
1

您应该使用“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>
于 2013-09-25T15:02:43.933 回答
0

试试这个，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"。

于 2013-09-25T15:02:10.840 回答
0

我认为以下应该可行，使用 inline-block 来调整标题的布局，然后在左对齐的标题上使用浮点数，以确保它与右边的相依。

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

h3 {
  display: inline-block;
  width: 50%;
  text-align: right;
}
于 2013-09-25T15:03:14.983 回答
0

您还可以使用 CSS 表格/表格单元格

<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/

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

此外，表格单元格将始终保留在一行上，这与浮动或内联块不同，对于小屏幕尺寸可能会换行到第二行。

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

于 2013-09-25T15:11:58.117 回答
0

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

Display:table-cell 实际上只存在于 CSS 中，以赋予实际元素及其子元素样式。它不应该用于让非表格元素表现得像表格元素。至少，恕我直言。

Float:left 似乎是一个不错的选择，如果您只是在寻找对齐元素的布局。

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

于 2013-09-25T15:32:44.223 回答