使块内联折叠其宽度 [英] making block inline collapses its width
问题描述
我知道我错过了一些明显的东西。我需要一个简短的横向规则
来在一行文本之前（在一个参考书目中，作者是重复的b
）。我试过这个：
< p>
< div class =" rule">< / div> ;,书名... 。
< / p>
风格：
div.rule {
显示：内联;
border-bottom：薄实黑色;
身高：1pt;宽度：8em;
}
为什么display：inline导致这个div的宽度定义被忽略了吗？
-
Haines Brown，KB1GRM
I know I''m missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:
<p>
<div class="rule"></div>, Title of book ...
</p>
style:
div.rule {
display: inline;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}
Why does "display: inline" cause this div''s width definition to be
ignored?
--
Haines Brown, KB1GRM
推荐答案
Haines Brown写道：
Haines Brown wrote:
我知道我''我缺少一些明显的东西我需要一个简短的横向规则
来在一行文本之前（在一个参考书目中，作者是重复的b
）。我试过这个：
< p>
< div class =" rule">< / div> ;,书名... 。
< / p>
风格：
div.rule {
显示：内联;
border-bottom：薄实黑色;
身高：1pt;宽度：8em;
}
I know I''m missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:
<p>
<div class="rule"></div>, Title of book ...
</p>
style:
div.rule {
display: inline;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}
尝试：
div.rule {
border-bottom：薄实黑色;
宽度：8em;
}
p.title {
位置：相对;
顶部：-2em;
左：8em;
}
Try:
div.rule {
border-bottom: thin solid black;
width: 8em;
}
p.title {
position: relative;
top: -2em;
left: 8em;
}
4月4日，13：56，Haines Brown< bro ... @ teufel.hartford-hwp.comwrote：
On 4 Apr, 13:56, Haines Brown <bro...@teufel.hartford-hwp.comwrote:
我需要一个短横向规则
I need a short horizontal rule
然后使用< hrand用CSS调整它
不要放< divinside< peither。
Then use <hrand tweak it with CSS
Don''t put <divinside <peither.
2007-04-04，Haines Brown< br **** @ teufel.hartford-hwp.comwrote ：
On 2007-04-04, Haines Brown <br****@teufel.hartford-hwp.comwrote:
我知道我错过了一些明显的东西。我需要一个简短的横向规则
来在一行文本之前（在一个参考书目中，作者是重复的b
）。我试过这个：
< p>
< div class =" rule">< / div> ;,书名... 。
< / p>
风格：
div.rule {
显示：内联;
border-bottom：薄实黑色;
身高：1pt;宽度：8em;
}
为什么display：inline导致这个div的宽度定义被忽略了？b $ b被忽略了？
I know I''m missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:
<p>
<div class="rule"></div>, Title of book ...
</p>
style:
div.rule {
display: inline;
border-bottom: thin solid black;
height: 1pt; width: 8em;
}
Why does "display: inline" cause this div''s width definition to be
ignored?
因为CSS规范说它应该：width属性不适用于
内联元素。
您可以尝试这样的事情：
..rule
{
border-bottom：1px纯黑色;
float：left;
clear：left;
宽度：8em;
身高：1em ;
}
..名称
{
margin-left：8em;
}
< div class =" rule">< / div>< div class =" name">书名< / div>
或者你所拥有但改变显示：内联显示：
inline-block。不会在FF上工作但会在Opera，Konqueror以及这个
的情况下工作，因为你直接设置了一个宽度，甚至可能是IE7从我听到的
。
Because the CSS spec says it should: the width property doesn''t apply to
inline elements.
You could try something like this:
..rule
{
border-bottom: 1px solid black;
float: left;
clear: left;
width: 8em;
height: 1em;
}
..name
{
margin-left: 8em;
}
<div class="rule"></div><div class="name">Title of book</div>
or exactly what you had but change display: inline to display:
inline-block. Won''t work on FF but will in Opera, Konqueror and in this
case, since you are setting a width directly, even perhaps IE7 from what
I hear.
这篇关于使块内联折叠其宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
