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

Posted 2023-03-25

【中文标题】如何使内联元素出现在新行上，或者块元素不占据整行？

【英文标题】：How to make an inline element appear on new line, or block element not occupy the whole line?

【发布时间】：2011-10-22 16:52:41

【问题描述】：

我不知道如何用 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>

有什么想法吗？还是我走错了路？

【问题讨论】：

我觉得你需要做一个图表或者截图来解释这个。

为此创建一个Fiddle Demo 以获得更好的答案

【参考方案1】：

你可以给它一个属性显示块；所以它会表现得像一个 div 并且有自己的行

CSS：

.feature_desc 
   display: block;
   ....

【讨论】：

谢谢！事实证明，我只是对块元素在 inline-block 元素中的工作理解不正确（IE7 与现代 CSS 的不兼容使情况变得更糟。）

该答案的虚拟 -1 因为它，是的，会换行，但整个元素也会占用 100% 的宽度；这可能不是想要的。考虑到 a 标签是 display:block 时，问题可能会更加明显。它将声称 100% 并且整个“行”都可以点击，而不仅仅是实际文本所在的部分。

OP 明确表示这不是所需的行为。

【参考方案2】：

尽管问题很模糊，HTML sn-p 也很有限，但我想

.feature_desc 
    display: block;

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

可能会给你想要在没有<br/> 元素的情况下实现的目标。尽管将您的 CSS 应用于这些元素会有所帮助。

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

【讨论】：

不明白为什么这得到这么少的选票...这是最好的方法（请参阅我对已接受答案为什么的评论）

您可以跳过 display:block 部分，因为前面的代码处理移动到下一行的元素。这对我有用。

【参考方案3】：

我认为浮动在这里可能最适合您，如果您不希望元素占据整行，则将其向左浮动应该可以。

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

编辑：现在浏览器有更好的支持，您可以使用 do inline-block。

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

根据文本对齐方式，这将通过其内联显示，同时也像块元素一样。

【参考方案4】：

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

label

    width:10px;
    display:block;
    white-space:nowrap;

【讨论】：

这只适用于文本...不适用于块元素。

【参考方案5】：

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

【讨论】：

最简单最整洁的解决方案。谢谢！

【参考方案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"]" 的目标是第一个标签专门用于“添加到购物车”按钮下。

【参考方案7】：

使用 flex 父级也可以。 将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;

【参考方案8】：

我遇到过类似的问题：

<span>
 <input>
 <label>
 <input>
 <label>
 ...
</span>

我不想弄乱源 html 生成器（即使这个 html 很糟糕）。所以我修复它的方法是在顶部span 上使用display: grid。然后grid-template-columns: auto auto;

任何想做类似事情的人，grid 现在是一个很好的解决方案（2021 年）。

例如，对于这个特定的问题，应用 display: grid; grid-template-columns: auto auto; 到 li 和 grid-column: 1 / 3; 到最后 span 会做到这一点。

【参考方案9】：

使用两条 CSS 规则

word-break: break-all;
display: list-item;

在 CSS 选择器和正文中

---

注意：

如果只处理需要分行的文本。

尝试像这样使用word-break（注意堆栈溢出代码会自动执行此操作，但我将其包括在内以帮助澄清在其他环境中的用法：

 word-break: break-all;

如果只处理像<span>这样的内联HTML元素

然后查看这个答案，了解如何在 html 标记上使用 display: list-item 将非文本元素（如锚标记）转换为行分隔元素

链接

How to make text in <a> tag wordwrap

---

示例（对于像 span 这样的 HTML 内联元素）

span 
  display: list-item;
  word-break: break-word;

<span>Line 1</span>
<span>Line 2</span>
<span>Line 3</span>
<span>Line 4</span>
<span>Line 5</span>

示例（文本内容）

function makePerson(name, age) 
    // add code here
    let person = Object.create();
    person.name = name;
    person.age = age;
    return person;


const person = makePerson('Vicky', 24);
const outputDiv = document.querySelectorAll("body .output");
const keys = Object.keys(person);

outputDiv.forEach((div,key) => 
    div.innerHTML = person[keys[key]];
);

body #output
    word-break: break-all;

<div>
   <div class="output"></div>
   <div class="output"></div>
</div>