css - 浮动：正确的属性这是在里面不管用

Question

我想右对齐标签内的数字

这又在标签内。

    <div class="first">
      <a class="background-type1" >
        <p>Some text</p>
        <p class="pull-right">{{=val1}}</p>
      </a><a class="background-type2">
        <p>SOme other text</p>
       <p class="pull-right">{{=val2}}</p>
      </a>
    </div>

CSS：

.pull-right {
  float: right;  
}

需要帮助作为我应该添加到 css 的内容，以便 val1 和 val 2 与右侧对齐

提前致谢！

Answer 1

您可以将值放在<span class="pull-right">标签内，例如：

HTML：

<div class="first"> 
    <a class="background-type1">
        <p>Some text
            <span class="pull-right">1</span>
        </p>
      </a>
    <a class="background-type2">
        <p>Some other text
             <span class="pull-right">2</span>
        </p>
      </a>
</div>

CSS：

.pull-right {
    float: right;
}

演示：http: //jsfiddle.net/sJQu4/1/

Answer 2

你可以这样做：http: //jsfiddle.net/62dDV/

.pull-right { float: right; }
.first{ border: 1px solid red; }
p{ border: 1px solid silver; display: inline-block; }
a{ border: 1px solid green; display: block; }

Answer 3

浮动元素需要在您希望它浮动旁边的元素之前或成为其子元素。在给定当前源顺序的情况下，您最好在float:left第一段上做一个，或者只是在 HTML 中移动<p class="pull-right">另一个之前。<p>