css：仅使用 css 定位文本和选择框答案

【问题标题】：css: positioning of text and selectbox with css onlycss：仅使用 css 定位文本和选择框
【发布时间】：2014-05-21 03:10:30
【问题描述】：

仅使用 css 将文本和选择框水平放置为 25% + 50% + 25% 的最佳方式是什么？

这就是我们所拥有的：

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

我们希望TextLeft在左边25%的区域居中（宽度可以改变），使 TextRight 居中于右侧 25% 的区域， <select id="myselectbox">...</select> 居中。

如果可能，请仅使用 CSS。

谢谢。

【问题讨论】：

如果您希望 CSS 在页面更改时动态更新和更改文本的位置，仅使用 CSS 是不可能的。 CSS 不是一种有条件的、在后台运行的语言。这就是 JaveScript 的用途。
为文本添加span，这样处理css中的元素会更容易。
@durbnpoisn 为什么？ jsfiddle.net/QjvMj
@Atal Shrivastava 为什么是跨度，而不是 div？
跨度是内联的，而 div 是块状的，这意味着跨度从左到右在 div 创建段落的地方。 @AtalShrivastava 是正确的。

标签： html css position alignment

【解决方案1】：

没有足够的结构来完成您在 HTML 中提出的要求。正如 Atal 提到的，您可以像这样添加跨度来处理它：http://jsfiddle.net/wq35T/

使 spans 内联块以保持其宽度，并通过边距修复使它们保持在同一行上。还有其他方法可以解决这个问题，但这可能是没有浮点数的最干净的代码。

编辑：不喜欢 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%;
}

【讨论】：

希望我没有迟到，但你轻松解决了这个问题@Andrew Clody