Question

.d1 {
    background-color: red;
    display: flex;
    justify-content: center;
}
.s1 {
    color: blue;
}

<div class="d1">
    <u>list:</u>
    <br>item1
    <br>item2
    <br><span class="s1">item3</span>
</div>

我正在尝试创建一个div，其内容在中心对齐。我使用上面的代码将文本list: item1 item2 item3显示在另一个下方，list:带下划线，item3显示为蓝色，但这会产生如此奇怪的结果：

item1和item2但item3位于list:的顶部和旁边......有什么问题，我该如何解决这个问题？ TY

Answer 1

您可以将<li>与一起使用，并添加u li {list-style-type: none;}以禁用列表项圈。

检查一下：

.d1 {
    background-color: red;
    display: flex;
    justify-content: center;
}
.s1 {
    color: blue;
}
u li {list-style-type: none;}

<div class="d1">
    <u>list:
     <li>item1</li>
     <li>item2</li>
     <li><span class="s1">item3</span></li>
    </u>
</div>

Answer 2

您可以通过不使用flex而使用inline-block和包装<div>来解决此问题。

.d1 {
    background-color: red;
    text-align: center;
}
.d2 {
    display: inline-block;
    text-align: left;
}
.s1 {
    color: blue;
}

<div class="d1">
    <div class="d2">
        <u>list:</u>
        <br>item1
        <br>item2
        <br><span class="s1">item3</span>
    </div>
</div>

Answer 3

.d1 {
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.s1 {
    color: blue;
}

<div class="d1">
    <u>list:</u>
    <br>item1
    <br>item2
    <br><span class="s1">item3</span>
</div>

结果好吗？

Answer 4

你可以在这里使用像这样的未排序列表：如果您需要更具体的解决方案，请告诉我！

＆＃13;

<html>
...
  <div>{{ firstName }}</div>
  <div>{{ lastName }}</div>
...
</html>

＆＃13;

.d1 {
    background-color: red;
    justify-content: center;
    display: block;
    text-align: center
}
.s1 {
    color: blue;
}

＆＃13;

Answer 5

为什么使用标记和“display：flex”。如果您使用display:flex，则其子节点将占据整个高度，list:，item3已完成此操作并创建了3列。除了其他内容不被视为子节点。你可以看到link来清除flex的想法

HTML证明内容和范围

5 个答案: