Question

我无法弄清楚如何用CSS做到这一点。如果我只使用<br>标签，它可以完美运行，但是我试图避免这样做，原因很明显。

基本上，我只希望.feature_desc span开始新行，但是：

如果我将其设为内联元素，则不会有换行符。
如果我把它变成块元素，它会扩展到适合整行，将每个图标放在自己的行上，并在屏幕上浪费大量空间（每个.feature_wrapper会略有不同尺寸，但没有一个像整个屏幕一样宽。）

示例代码：这有效，但使用br标记：

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

我想用CSS设置样式以达到相同的效果：

<li class='feature_wrapper' id='feature_icon_getstart'> 
    <span style='display: none;' class='search_keywords'>started</span> 
    <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>
    <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span> 
</li>

有什么想法吗？或者我是以错误的方式解决这个问题？

Answer 1

你可以给它一个属性显示块;所以它的行为就像一个div并有自己的行

CSS：

.feature_desc {
   display: block;
   ....
}

Answer 2

尽管问题非常模糊且HTML片段非常有限，但我认为

.feature_desc {
    display: block;
}
.feature_desc:before {
    content: "";
    display: block;
}

如果没有<br/>元素，

可能会让您想要实现。虽然将CSS应用于这些元素会有所帮助。

请注意。上面的例子在IE7中不起作用。

Answer 3

我认为花车可能在这里最适合你，如果你不希望元素占据整行，那么浮动它应该工作。

.feature_wrapper span {
    float: left;
    clear: left;
    display:inline
}

编辑：现在浏览器可以更好地支持你可以使用do inline-block。

.feature_wrapper span {
    display:inline-block;
    *display:inline; *zoom:1;
}

取决于text-align，它将通过其内联显示，同时也像块元素一样。

Answer 4

对于块元素不占据整行，将其宽度设置为小而且white-space:nowrap

label
{
    width:10px;
    display:block;
    white-space:nowrap;
}

Answer 5

span::before { content: "\A"; white-space: pre; }

Answer 6

我在我们的 WooCommerce 网站上遇到了类似的情况。 “添加到购物车”按钮就在自定义产品字段旁边，我需要将产品字段放在按钮下方。这是最终帮我解决问题的 CSS

#product-57310 label[for="wcj_product_input_fields_local_1"] { display: -webkit-box!important; margin-top: 80px; }

其中“#product-57310”是woocommerce中产品的ID，因此它仅适用于特定的产品页面而不是每个产品页面，并且其中“label[for="wcj_product_input_fields_local_1"]”针对的是第一个标签，专门用于“添加到购物车”按钮下。

Answer 7

使用 flex parent 也可以。将 flex-direction 设置为 column 会将每个子项放在一个新行上，设置 align-items 将使它们不会占据整个宽度。这是一个小例子：

<div class="parent">
   <a>some links</a>
   <a>that should be on their own lines</a>
   <a>but not take up the whole parent width</a>
</div>

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

如何使内联元素出现在新行上，或者块元素不占用整行？

7 个答案: