Html CSS - 固定宽度跨度/div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10137525/
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
CSS - fixed width span/div
提问by ChrisCa
I am trying to layout the content for a popup dialog box, but not having much luck
我正在尝试为弹出对话框布局内容，但运气不佳
I've tried using both spans and inline divs, but neither of them seem to respect the width or min-width CSS
我试过同时使用跨度和内联 div，但它们似乎都不尊重宽度或最小宽度 CSS
any ideas?
有任何想法吗？
Here's the Html
这是 Html
<div id="MessageBox" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 40.8333px; height: auto;" scrolltop="0" scrollleft="0">
<div class="popupKey">Bank Reference</div>
<div class="popupValue"></div>
<br>
<div class="popupKey">Amount</div>
<div class="popupValue">650.00</div>
<br>
<div class="popupKey">Currency</div>
<div class="popupValue">GBP</div>
<br>
<div class="popupKey">PaymentDate</div>
<div class="popupValue">02/06/2011</div>
<br>
<div class="popupKey">Remitter</div>
<div class="popupValue"></div>
<br>
<div class="popupKey">Senders Reference</div>
<div class="popupValue"></div>
<br>
</div>
and the CSS
和 CSS
.popupKey
{
display : inline;
min-width: 150px;
}
.popupValue
{
display : inline;
min-width: 150px;
}
I would like all the items in the popupValue column to be aligned
我希望 popupValue 列中的所有项目都对齐
there's a JSFiddle here:
这里有一个 JSFiddle：
回答by Arno
Inline content can't have a width defined. Try using display: inline-blockor using display: block; float: left;
内联内容不能定义宽度。尝试使用display: inline-block或使用display: block; float: left;
I've updated your jsfiddle; have a look at http://jsfiddle.net/NtK4Y/1/
我已经更新了你的 jsfiddle；看看http://jsfiddle.net/NtK4Y/1/
回答by Chuck Norris
Use inline-blockinstead of inline.
使用inline-block代替inline。
You can see updated jsfiddle http://jsfiddle.net/NtK4Y/2/
你可以看到更新的 jsfiddle http://jsfiddle.net/NtK4Y/2/
回答by mparryy
A float:leftalso might help your problem, they will be placed next to each other.
Afloat:left也可能会帮助您解决问题，它们将彼此相邻放置。
