块元素的宽度 [英] width of block elements
问题描述
嗨！
这就是它应该是什么样子：
< style type =" text / css" >
span.h1 {
border-style：solid;
border-width：0px;
border-color：＃000000;
border-bottom-width：2px;
padding-left：50px;
}
< / style>
< span class =" h1">一些文字< / span>
这正是我想要的 - 除了我宁愿使用块元素
（例如真正的h1）而不是span，因为它应该表现为
就像一个块元素（文本浮动等）。
但是如果我使用块元素，它将始终覆盖整个宽度
父元素，这不是我想要它做的（因为这个
也在整个宽度上拉伸边框底线）。
我可以将跨度放在div中：
< div>< span class =" h1" ;>一些文字< / span>< / div>
但在我看来，这似乎是一个丑陋的黑客，而不是一个干净的解决方案。
任何提示我如何强制块元素只使用它需要的空间？固定宽度当然不是一个选项，因为文本将是
不同的长度。
感谢您的时间
Florian
Hi!
Here''s what it should look like:
<style type="text/css">
span.h1 {
border-style:solid;
border-width:0px;
border-color:#000000;
border-bottom-width:2px;
padding-left:50px;
}
</style>
<span class="h1">Some Text</span>
That''s exactly what I want - except that I''d rather use a block element
(the real h1 for example) instead of the span, because it should behave
like a block element (text float etc.).
But if I use a block element, it will always cover the whole width of
the parent element, and that''s not what I want it to do (because this
stretches the border-bottom-line over the whole width, too).
I could put the span in a div:
<div><span class="h1">Some Text</span></div>
But this seems to me like an ugly hack and not like a clean solution.
Any hints how I could force a block element to use only the space it
needs? Fixed widths are of course not an option as the texts will be of
different length.
Thanks for your time
Florian
推荐答案
Florian Brucker写道：
Florian Brucker wrote:
这就是它应该是什么样子：
< style type =" text / css">
span.h1 {
border-style：solid;
border-width：0px;
border-color： ＃000000;
border-bottom-width：2px;
padding-left：50px;
}
< / style>
< span class =" h1">一些文字< / span>
这正是我想要的 - 除了我宁愿使用块元素
（例如真正的h1）而不是span，因为它应该像块元素一样表现（文本浮动等）。
但是如果我使用块元素，它将始终覆盖整个宽度
父元素，那不是什么我希望它能做到（因为这也会在整个宽度上拉伸边界底线）。
我可以将跨度放在div中：
< div>< span class =" h1">一些文字< / span>< / div>
但在我看来，这似乎是一个丑陋的黑客，而不是一个干净的解决方案。
任何提示我如何强制块元素只使用它需要的空间？固定宽度当然不是一个选项，因为文本的长度不同。
Here''s what it should look like:
<style type="text/css">
span.h1 {
border-style:solid;
border-width:0px;
border-color:#000000;
border-bottom-width:2px;
padding-left:50px;
}
</style>
<span class="h1">Some Text</span>
That''s exactly what I want - except that I''d rather use a block element
(the real h1 for example) instead of the span, because it should behave
like a block element (text float etc.).
But if I use a block element, it will always cover the whole width of
the parent element, and that''s not what I want it to do (because this
stretches the border-bottom-line over the whole width, too).
I could put the span in a div:
<div><span class="h1">Some Text</span></div>
But this seems to me like an ugly hack and not like a clean solution.
Any hints how I could force a block element to use only the space it
needs? Fixed widths are of course not an option as the texts will be of
different length.
不知道它对规格有多严重，但是你
可以浮动< h1>离开，并设置清楚：左;在下一个
元素上，例如a< p>。
只有当
左边没有其他块时才有效< p>，否则clear属性会搞砸。
-
Els
http://locusmeus.com/
Sonhos vem。 Sonhos v？o。 Orestoébritfeito。
- Renato Russo -
Don''t know how badly it goes against the specs, but you
could float the <h1> left, and set clear:left; on the next
element, for instance a <p>.
Only works when there are no other blocks to the left of the
<p>, or else the clear property will mess things up.
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
" Florian Brucker" <至** @ torfbold.com>在消息中写道
news：2i ************ @ uni-berlin.de ...
"Florian Brucker" <to**@torfbold.com> wrote in message
news:2i************@uni-berlin.de...
嗨！
这就是它的样子：
< style type =" text / css">
span.h1 {
border-style： solid;
border-width：0px;
border-color：＃000000;
border-bottom-width：2px;
padding-left：50px;
}
< / style>
< span class =" h1">一些文字< / span>
那是'正是我想要的 - 除了我宁愿使用块元素
（例如真正的h1）而不是span，因为它应该像块元素一样表现（文本浮动等） 。
但是如果我使用一个块元素，它将始终覆盖父元素的整个宽度，而这不是我想要它做的（因为这延伸了整个宽度的边界底线也是如此。
Hi!
Here''s what it should look like:
<style type="text/css">
span.h1 {
border-style:solid;
border-width:0px;
border-color:#000000;
border-bottom-width:2px;
padding-left:50px;
}
</style>
<span class="h1">Some Text</span>
That''s exactly what I want - except that I''d rather use a block element
(the real h1 for example) instead of the span, because it should behave
like a block element (text float etc.).
But if I use a block element, it will always cover the whole width of
the parent element, and that''s not what I want it to do (because this
stretches the border-bottom-line over the whole width, too).
怎么样
h1 {padding-left：50px ;文字装饰：下划线; }
？
How about
h1 { padding-left: 50px; text-decoration: underline; }
?
>不知道它对规格有多么糟糕，但你可以浮动
> Don''t know how badly it goes against the specs, but you could float the
< h1>离开，并设置清楚：左;在下一个元素上，例如< p>。
只有在< p>左边没有其他块时才有效，或者
否则clear属性会搞乱。
<h1> left, and set clear:left; on the next element, for instance a <p>.
Only works when there are no other blocks to the left of the <p>, or
else the clear property will mess things up.
我也想过这个，但是没有意识到人们可以做得很漂亮
优雅使用
h1 {
浮动：左;
}
h1 + * {
clear：left;
}
如果别无他法，我会这样做的。
感谢您的提示，
Florian
I thought about that, too, but didn''t realize one could do it pretty
elegant using
h1 {
floating:left;
}
h1 + * {
clear:left;
}
If there''s no other way to do it, I''ll do it like that.
Thanks for the tip,
Florian
这篇关于块元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
