CSS display:inline 重置高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5759554/
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
display:inline resets height and width
提问by N30
I have created example at http://jsfiddle.net/GKnkW/2/
我在http://jsfiddle.net/GKnkW/2/创建了示例
html
html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="step">1</div>
<div class="step">2</div>
<br/><br/>
<div class="step1">3</div>
<div class="step1">4</div>
</body>
</html>
css
css
.step
{
height:150px;
width:150px;
background:yellow;
display:inline;
}
.step1
{
height:150px;
width:150px;
background:yellow;
}
I want to display two divs side by side with their original height and width ( set in css ) as soon as i add display:inline property to css it seems to loose height and width defined earlier. [ check divs with # 1 and #2 which seems to loose height and width setting ]
我想在我将 display:inline 属性添加到 css 后，并排显示两个 div，它们的原始高度和宽度（在 css 中设置）似乎松散了之前定义的高度和宽度。[用 #1 和 #2 检查 div，这似乎松散了高度和宽度设置]
can some one pin point an error which I seems to be doing or workaround for this weird behavior ?
有人可以指出我似乎正在做的错误或解决这种奇怪行为的方法吗？
回答by DA.
Inline objects don't have heights or widths. Why are you setting them inline to begin with? You probably want to either float them or use display: inline-block.
内联对象没有高度或宽度。为什么要开始将它们设置为内联？您可能想要浮动它们或使用display: inline-block.
回答by Moe Mamdouh
Use this:
用这个：
display:inline-block;
回答by noderman
Just adding that I had a similar problem and thought it was a Javascript/Jquery issue. This thread solved for me.
只是补充说我有一个类似的问题，并认为这是一个 Javascript/Jquery 问题。这个线程为我解决了。
INLINE elements have no width, so you cannot set it via js.
INLINE 元素没有宽度，所以你不能通过 js 设置它。
Thanks.
谢谢。
Here's a link to my issue just in case.
这是我的问题的链接，以防万一。
Jquery and Jqueryui: set width not working after using resizable?
回答by Racter
This should do it
这应该做
html
html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="step-section">
<div class="step">1</div>
<div class="step">2</div>
</div>
<div class="step-section">
<div class="step">3</div>
<div class="step">4</div>
</div>
</body>
</html>
css
css
.step
{
margin:5px;
height:150px;
width:150px;
background: yellow;
float:left;
}
.step-section
{
clear:both;
}
