不带100％宽度的显示块 [英] Display block without 100% width

问题描述

我想使用display属性将一个span元素设置在另一个元素的下方。我尝试应用内联块，但没有成功，并认为我可以使用块，如果我不知何故设法避免给元素的宽度为100％（我不想要的元素伸出）。这是可以做到的，或者如果没有，那么解决这类问题的好习惯是什么？

I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?

示例：一个新闻列表，其中我想设置一个 （注意：< a> 而不是< span> ）

Example: a news list where I want to set a "read more" link at the end of each post (note: <a> instead of <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

更新：已解决。在CSS中，应用

Update: Solved. In CSS, apply

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

推荐答案

问题正确，以下CSS将浮动你的a下面的跨度，并保持它从100％的宽度：

If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:

a {
    display: block; 
    float: left; 
    clear: left; 
}

这篇关于不带100％宽度的显示块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！