1

我想将#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>
4

2 回答 2

0

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

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

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

于 2013-05-19T14:09:20.010 回答
0

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

#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

但是不要忘记你必须避免内联块元素中的空白问题:)

于 2013-05-19T14:16:16.117 回答