CSS问题：“Display：flex”正在忽略具有html标记的子元素

4sup72z8 于 2023-01-27 发布在其他

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

我试图在td标签中呈现br、p空间标签等html标签，td标签包含display：flex。
注意：这是我们现有的代码
红色突出显示的文本（p标签）需要在右侧呈现每一个新行，但它只是在一行

中水平呈现
当我尝试更改显示时：阻止红色突出显示正确，但未呈现为右列

上的表格
我想实现这个

我不熟悉display：flex。如果td元素有html标记，“display：flex”对它不友好？如何用flex实现和用html标记呈现。

css

来源：https://stackoverflow.com/questions/75230087/css-issue-displayflex-is-ignoring-the-child-elements-that-has-html-tags

3条答案

按热度按时间

s71maibg1#

将此CSS赋给这三个框的父元素：

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

我没有看到你的完整代码，但如果你想在列和右侧三个红色框，使用这个。

赞(0）回复(0）举报 2023-01-27

7cwmlq892#

我知道你只问了正确的列，但你也应该知道你没有使用表，因为它们应该在这里使用。你的伪元素标签不仅让你的事情更困难，他们也是不可访问的，他们应该只是作为表格数据显示。
也就是说，您确实应该重构代码。
就像其他人提到的，你可以在特定的单元格上使用flex-direction: column，如果该单元格被设置为display: flex，那么这将使该单元格中的所有子单元格被组织在一个从上到下的列中，而不是默认的从左到右。
你没有提供你的原始代码，但是他是一个重构者，包括你的问题的解决方案。

.table {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-spacing: 0 .25em;
  padding: 1em;
}

.table__row > * {
  vertical-align: top;
  text-align: left;
  padding: .25em;
}

.table__row th {
  background-color: #fefb54;
}

.table__row td {
  background-color: #ea4025;
}

.table__row--heading {
  background-color: #952516;
  color: white;
}

.table__row--heading th,
.table__row--heading td {
  background-color: transparent;
}
 
.table__row th + td {
  display: flex;
  vertical-align: top;
  flex-direction: column;
}

.table__row p {
  margin: 0;
}

.table__row p + * {
  margin-block-start: 0.5em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

<table class="table">
  <tr class="table__row table__row--heading">
    <th><span class="sr-only">First Name</span></th>
    <td>John</td>
  </tr>
  <tr class="table__row table__row--name">
    <th>Last Name</th>
    <td>Smith</td>
  <tr>
  <tr class="table__row table__row--gender">
    <th>Gender</th>
    <td>
      <p>this is a first gender</p>
      <p>(break point) &nbsp;</p>
      <p>this is the final gender</p>
    </td>
  </tr>
</table>

赞(0）回复(0）举报 2023-01-27

ctzwtxfj3#

您可以遵循此结构来实现您的要求：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code</title>
<style>
table {
    border-collapse: collapse;
    width: 100%;
}
td {
    display: block;
}
td.first:before {
    content: "First Name";
    width: 200px;
    display: inline-block;
}
td.last:before {
    content: "Last Name";
    width: 200px;
    display: inline-block;
}
td.gender {
    display: flex;
    flex-direction: row;
}
td.gender:before {
    content: "Gender";
    width: 200px;
}
td.gender div p {
    margin: 0;
}
</style>
</head>
<body>
  <table>
    <tbody>
        <tr>
            <td class="first" title="First Name">John</td>
            <td class="last" title="Last Name">Dave</td>
            <td class="gender" title="Gender">
                <div>
                    <p>first gender</p>
                    <p>break point</p>
                    <p>last gender</p>
                </div>
            </td>
        </tr>
    </tbody>
  </table>
</body>
</html>

下面是演示链接：Demo

赞(0）回复(0）举报 2023-01-27

我来回答

CSS问题：“Display：flex”正在忽略具有html标记的子元素

3条答案

相关问题

热门标签

最新问答