Html 元素左侧和右侧的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6613746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text on left and right side of element
提问by Web_Designer
Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?
使用 CSS 在元素的右侧和左侧都有文本并垂直位于同一位置的最佳方法是什么？
Thus ending up with the following layout:
因此最终得到以下布局：
The container has a fixed width, so I don't want to use positioning, because I know I don't have to.
容器有固定的宽度，所以我不想使用定位，因为我知道我不必。
回答by rolling stone
(1) Add two divs within the element that contain each text string
(1)在包含每个文本字符串的元素内添加两个div
<div>
<div class="div1">Left Text</div>
<div class="div2">Right Text</div>
</div>
(2) Float the two divs next to each other
(2) 浮动两个相邻的div
.div1 {
float: left;
}
.div2 {
float:right;
}
(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).
(3) 为右边的 div 设置 text-align 属性（这将确保文本一直推到你的例子中）。
.div2 {
float:right;
text-align: right;
}
回答by Jamie Dixon
You can place your two items inside the same container and float them into the right position.
您可以将两个项目放在同一个容器中，然后将它们浮动到正确的位置。
So you might have something like:
所以你可能有这样的事情：
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
</div>
and CSS:
和 CSS：
.container{width:500px;}
.item1, item2{width:200px;}
.item1{float:left;}
.item2{float:right;}
Example: http://jsfiddle.net/7Wvhj/1/
