Question

我想将#myLabel放在#myDiv的最左边，将#myA放在#myDiv的最右边，并将它们放在同一行。我知道我可以制作#myLabel和#myA块元素并左右浮动它们。有更合适的方法吗？

<div id="myDiv" style="width:500px">
   <label id="myLabel">My Label</label>
   <a id="myA" href="clickme.html">Click Me</a>
</div>

Answer 1

浮动应该可以正常工作，但你也可以使用绝对定位。

#myDiv {
    position: relative;
}
#myLabel {
    position: absolute;
    left: 0;
}
#myA {
    position: absolute;
    right: 0;
}

http://jsfiddle.net/ExplosionPIlls/gaCQp/1/

Answer 2

我有一个虚拟的解决方案，你可以在没有绝对位置且没有浮动的情况下做到这一点：

#myLabel {
  display: inline-block;
  text-align: left;
  width: 50%;
}

#myA {
  display: inline-block;
  text-align: right;
  width: 50%;
}
#myDiv {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
}

这是一个例子：

http://jsbin.com/alidim/2/edit

但是不要忘记你必须避免在内联块元素中出现空格问题：）

使用CSS定位内联元素

2 个答案: