Question

将文本和选择框水平定位为25％+ 50％+ 25％仅使用css的最佳方法是什么？

这就是我们所拥有的：

<div id="mydiv">TextLeft <select id="myselectbox">...</select> TextRight</div>

我们希望TextLeft位于左侧25％的区域中（宽度可以更改），因此TextRight位于右侧25％的区域中心，并且<select id="myselectbox">...</select>居中。

请尽可能使用CSS。

谢谢。

Answer 1

没有足够的结构来处理你在HTML中提出的问题。正如Atal所提到的，您可以添加跨度来处理它：http://jsfiddle.net/wq35T/

使跨度内联块保持宽度并使用边距修复以使它们保持在同一条线上。还有其他方法可以解决这个问题，但这可能是最简洁的代码，没有浮点数。

编辑：不是IE6 / 7很开心。

<div id="mydiv">
    <span>TextLeft</span>
    <select id="myselectbox">...</select>
    <span>TextRight</span>
</div>

CSS：

#mydiv {
    text-align:center;
}

#mydiv > span {
    width:25%;
    display:inline-block;
    margin-left:-4px;
    text-align:center;
}

#myselectbox {
    width:50%;
}

css：文本的定位和仅用css选择框

1 个答案: