css 如何使用Flex布局在文本中内联标签？

dfuffjeb 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(139)

如何用display: flex来模拟display: box？看起来box被抛弃了，但是我需要内联渲染元素。
flex将使用自己的规则row或column覆盖布局，因此flex容器中的标签不会被内联呈现。
编辑：我所做的是为一个页面写一个用户脚本。我不想修改我插入的元素的父元素。否则我必须自己适应每一个父元素为display: flex的页面。
EDIT2：我不想更改text nodes<a href></a>text nodes的结构

#container {
  display: flex;
  width: 100px;
}

#box {
  display: -webkit-box;
  width: 100px;
}

#a {
  display: inline-flex;
}

#tag {
  display: flex;
}

`display: flex`
<p id="container">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

Expected: `display: -webkit-box`
<p id="box">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

`display: block` is fine. But it will failed when tag display as flex(`inline-flex` is fine)
<p id="container" style="display: block">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

css

来源：https://stackoverflow.com/questions/75610611/how-to-inline-a-tag-in-text-with-flex-layout

3条答案

按热度按时间

cngwdvgl1#

您可以简单地为消息指定一个宽度。

#container {
display:flex;

}

#message {
  width:5rem;
}

<p id="container">
  <span id="tag">[TAG]</span> <span id="message">Hello world and <a id="a" href="/">StackOverflow</a>! Show me the money</span>
</p>

赞(0）回复(0）举报 2023-03-05

lkaoscv72#

添加另一个伸缩框并设置flex-direction: column;。

#container {
  display: flex;
  width: 100px;
}

#flex-column {
  display: flex;
  flex-direction: column;
}

#a {
  display: inline-flex;
}

#tag {
  display: flex;
}

<p id="container">
  <span id="tag">[TAG]</span><span id="flex-column">&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money</span>
</p>

赞(0）回复(0）举报 2023-03-05

bprjcwpo3#

你可以用CSS网格来实现：

#container {
  display: grid;
  grid-template-columns: auto auto; /* 2 columns */
  width: 100px;
}

#box {
  display: -webkit-box;
  width: 100px;
}

#a {
  display: inline-flex;
}

#tag {
  display: flex;
  grid-row: span 50; /* a big value to create many rows*/
}

`display: grid`
<p id="container">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

Expected: `display: -webkit-box`
<p id="box">
  <span id="tag">[TAG]</span>&nbsp; Hello world and&nbsp;<a id="a" href="/">StackOverflow</a>! Show me the money
</p>

赞(0）回复(0）举报 2023-03-05

我来回答

css 如何使用Flex布局在文本中内联标签？

3条答案

相关问题

热门标签

最新问答