1

我希望“值”右对齐。这是我的 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/

4

5 回答 5

1

您正在使用display: inline-block;which 将使元素内联，它不再是 a block level element，因此文本没有空间与 theleft或right.

只需将元素包装在 a 中div，然后float将元素包装到right.

演示

也在使用

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

为了更好的清除修复，您还可以使用下面的代码片段并调用父元素上的类。

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

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

于 2013-09-13T04:27:42.343 回答
1

不确定我是否正确理解了您的问题。但是，如果您添加 awidth那么您可以使文本与框右对齐，如下所示：

.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;
}

工作演示

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

于 2013-09-13T04:28:04.863 回答
1

块父容器应该使文本对齐才能工作。在你的情况下，它是身体本身..演示 

body {
    background-color: orange;
    text-align:right;
}
于 2013-09-13T04:28:15.580 回答
1

尝试这个：）

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

于 2013-09-13T04:29:34.120 回答
1

语义方法：

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

于 2013-09-13T04:44:21.590 回答