Question

我希望“值”能够正确对齐。这是我的HTML：

<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>

...和我的CSS：

.blueBold {
    color: navy;
    font-weight: bold;
    font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
    display: inline-block;
}
.values {
    color: white;
    text-align:right;
    display: inline-block;
}

我需要做些什么才能让值拥抱右边缘？

jsfiddle在这里：http://jsfiddle.net/clayshannon/wvuQz/1/

Answer 1

您正在使用display: inline-block;来使元素内联，它不再是block level element，因此文本没有空间可以与left或right对齐{1}}。

只需将元素包含在div而不是float元素的right内。

Demo

也在使用

.wrap {
   overflow: hidden; /* This will clear floats */
}

为了更好的clearfix，您还可以使用下面的代码片段并在父元素上调用该类。

.clear:after {
   clear: both;
   display: table;
   content: "";
}

您也可以在此处width分配.wrap，以便元素保持在边界内。

Answer 2

不确定我是否正确理解了您的问题。但是，如果您添加width，则可以将文本右对齐，如下所示：

.blueBold {
    color: navy;
    font-weight: bold;
    font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
    display: inline-block;
    width: 200px;
}
.values {
    color: white;
    text-align:right;
    width: 100px;
    display: inline-block;
}

Working Demo

注意：这不是用于将文本对齐到屏幕的右边缘。这是为了使.values元素内的文本在框内正确对齐。

Answer 3

块父容器应该使文本对齐起作用。在你的情况下，它是身体，本身.. DEMO

body {
    background-color: orange;
    text-align:right;
}

Answer 4

试试这个:)

.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
           }
.values {
color: white;
text-align:right;
      }

小提琴：http://jsfiddle.net/wvuQz/5/

Answer 5

语义方法：

<div>
  <p class="blueBold">Existing Building</p>
  <p class="values pull-right">19,322 sf</p>
</div>
<div>
  <p class="blueBold">Acreage</p>
  <p class="values pull-right">3</p>
</div>

CSS：

.pull-right {
  float: right;
}

演示：http://jsfiddle.net/wvuQz/7/

更多信息： http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/

我怎样才能分别将html元素面向左对齐和右对齐，最好是使用CSS？

5 个答案: