Html 如何在div中浮动跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17938303/
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
How to float a span in a div?
提问by JP Richardson
I'm trying to learn how to actually use CSS without the help of Bootstrap.
我正在尝试学习如何在没有 Bootstrap 帮助的情况下实际使用 CSS。
I have the following: (can be viewed here: http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview)
我有以下内容：（可以在这里查看：http: //plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview）
<div class="block">
<span class="pull-left">George</span>
<span class="pull-right">.20</span>
</div>
<div class="block">
<span class="pull-left">Carl</span>
<span class="pull-right">.81</span>
</div>
<div class="block">
<span class="pull-left">Steve</span>
<span class="pull-right">.pull-left {
float: left;
}
.pull-right {
float: right;
}
.block {
display: block; /* since, div, I don't need this right ?*/
background-color: #87CEEB;
width: 100%;
}
.34</span>
</div>
and the CSS...
和 CSS ...
George .20
Carl .81
Steve <div class="block">
<span class="pull-left">George</span>
<span class="pull-right">.20</span>
<div style='clear:both'></div>
</div>
.34
If I was using Bootstrap, I could achieve the desired effect, by putting my html in a containerdiv and instead of using my custom class of block, add the class btnand btn-block.
如果我使用的是 Bootstrap，我可以通过将我的 html 放在一个containerdiv 中而不是使用我的自定义类block，添加类btn和btn-block.
I want to have the names align vertically on the left and the prices align vertically on the right. What am I missing?
我想让名称在左侧垂直对齐，价格在右侧垂直对齐。我错过了什么？
Sort of like:
有点像：
.block:after {
content: ":" /* <--- at a complete loss why this works */
}
Please don't mention tables, like I said, I could use bootstrap and wrap the above html in div.container, and then use button.btn.btn-blockinstead of my div.blockto achieve the exact same effect. Thanks.
请不要提桌，就像我说的，我可以用引导和包装上面的HTML中div.container，然后用button.btn.btn-block，而不是我div.block实现了完全一样的效果。谢谢。
Update 1:
更新 1：
OK, I didn't expect there to be more than maybe one or two solutions, but there's quite a bit. Can someone explain the pros/cons of each solution? I'm really at a loss here.
好吧，我没想到会有不止一两个解决方案，但确实有很多。有人可以解释每个解决方案的优缺点吗？我真的很茫然。
Solution #1:
解决方案#1：
Add a new div element:
添加一个新的 div 元素：
.block:after {
content:"";
display: table;
clear: both;
}
Solution #2:
解决方案#2：
Add clear:both; overflow:auto;to the blockclass by thgaskel
通过thgaskel添加clear:both; overflow:auto;到block班级
Solution #3:
解决方案#3：
This one seems to create margins between the blocks.
这似乎在块之间创建了边距。
Changedisplay:blockto display:inline-blockfor the blockclass.
更改display:block到display:inline-block的block类。
Solution #4:
解决方案#4：
Addfloat:leftto the blockclass.
添加float:left到block班级。
Solution #5:
解决方案#5：
Discovered this one while messing around. Create a new selector:
闲逛的时候发现了这个。创建一个新的选择器：
.block {
display: inline-block; //change like this
background-color: #87CEEB;
width: 100%;
}
Solution #6:
解决方案#6：
Discovered this one from reading this page.
.block {
display: block;
float: left;
background-color: #87CEEB;
width: 100%;
}
I'm feeling pretty overwhelmed and am not sure which to pick. Thanks.
我感到非常不知所措，不知道该选择哪个。谢谢。
回答by Praveen
Instead of display: block;, use the below css
而不是display: block;，使用下面的css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="block">
<span class="pull-left">George</span>
<span class="pull-right">.20</span>
<div style='clear:both'></div>
</div>
<div class="block">
<span class="pull-left">Carl</span>
<span class="pull-right">.81</span>
<div style='clear:both'></div>
</div>
<div class="block">
<span class="pull-left">Steve</span>
<span class="pull-right">.block {
display: block; /* since, div, I don't need this right ?*/
background-color: #87CEEB;
width: 100%;
float:left;
}
.34</span>
<div style='clear:both'></div>
</div>
</body>
</html>
Update:Since the gap is distrubing, better use
更新：由于差距令人不安，更好地使用
##代码##Actaully inline-block tends to leave space which can be prevented in many ways.
实际上内联块往往会留下可以通过多种方式防止的空间。
Even this solves your problem, check jsfiddle
即使这可以解决您的问题，请检查jsfiddle
回答by JanR
You are close in your approach, the only thing you will need to do to make this work is to clear the float after it's been applied to the span's.
您已经接近您的方法了，您需要做的唯一一件事就是在将浮动应用于跨度之后清除浮动。
Have a look at how clearworks in HTML/CSS : http://www.w3schools.com/cssref/pr_class_clear.asp
看看clear在 HTML/CSS 中是如何工作的：http: //www.w3schools.com/cssref/pr_class_clear.asp
Your html would look like this:
你的 html 看起来像这样：
##代码##回答by Hushme
Add float:left;to .blockclass since its child are floating that why you need to float its parent div to get the full width
添加float:left;到.block类，因为它的孩子是浮动的，为什么你需要浮动它的父 div 以获得全宽
