Html CSS格式dl标记水平和垂直

我的标记如下所示：

<dl>
    <dt>Item 1</dt>
    <dd>a</dd>

    <dt>Item 2</dt>
    <dd>b</dd>

    <dt>Item 3</dt>
    <dd>c</dd>

    <dt>Item 4</dt>
    <dd>d</dd>
</dl>

项目1
A.
项目2
B
项目3
C
项目4
D

我想将其样式设置为如下所示：

<dl>
    <dt>Item 1</dt>
    <dd>a</dd>

    <dt>Item 2</dt>
    <dd>b</dd>

    <dt>Item 3</dt>
    <dd>c</dd>

    <dt>Item 4</dt>
    <dd>d</dd>
</dl>

---

我已经尝试了各种各样的事情，但仍然需要更改标记。有没有办法只使用CSS就可以做到这一点？

使用dl/dt/dd是否非常必要？这可以通过ul/li轻松解决，例如

<style>
    ul li {
        display: inline-block;
    }
    li {
        text-align: center;
    }
</style>

<ul>
    <li>
        a
        <p>Item 1</p>
    </li>
    <li>
        b
        <p>Item 2</p>
    </li>
    <li>
        c
        <p>Item 3</p>
    </li>
    <li>
        d
        <p>Item 4</p>
    </li>
</ul>

ulli{
显示：内联块；
}
李{
文本对齐：居中；
}


A.
项目1



B
项目2



C
项目3



D
项目4

---

我不相信你能在不改变标记的情况下得到预期的结果。

使用dl/dt/dd是否非常必要？这可以通过ul/li轻松解决，例如

<style>
    ul li {
        display: inline-block;
    }
    li {
        text-align: center;
    }
</style>

<ul>
    <li>
        a
        <p>Item 1</p>
    </li>
    <li>
        b
        <p>Item 2</p>
    </li>
    <li>
        c
        <p>Item 3</p>
    </li>
    <li>
        d
        <p>Item 4</p>
    </li>
</ul>

ulli{
显示：内联块；
}
李{
文本对齐：居中；
}


A.
项目1



B
项目2



C
项目3



D
项目4

我不相信你能在不改变标记的情况下得到预期的结果。

实际上，你可以在不改变标记/HTML的情况下得到预期的结果

请查看：

HTML

<dl>
    <dt>Item 1</dt>
    <dd>a</dd>

    <dt>Item 2</dt>
    <dd>b</dd>

    <dt>Item 3</dt>
    <dd>c</dd>

    <dt>Item 4</dt>
    <dd>d</dd>
</dl>

实际上，您可以在不更改标记/HTML的情况下获得所需的结果

请查看：

HTML

<dl>
    <dt>Item 1</dt>
    <dd>a</dd>

    <dt>Item 2</dt>
    <dd>b</dd>

    <dt>Item 3</dt>
    <dd>c</dd>

    <dt>Item 4</dt>
    <dd>d</dd>
</dl>

---

这不是非常必要，但我想保持尽可能干净的表达和内容分离。为了做你想做的事情，你绝对需要一个围绕dt+dd的容器，如果使用dt+dd，W3C不建议这样做。如果您将

li p{

更改为

li，我建议您切换到不同的标记结构，如建议的@VitorRigoni{

它将按要求将文本居中。这不是非常必要，但我希望保持尽可能干净的表示和内容分离。要完成您想要做的事情，您绝对需要dt+dd周围的容器，如果使用dt+dd，W3C不建议这样做。我建议您切换到不同的标记结构如果您将

li p{

更改为

li，请将其更改为建议值。@VitorRigoni{

它将按要求将文本居中。它起作用——尽管你受到固定宽度和位置的限制。如果内容扩展，它会变得一团糟。这是真的，施瓦布勒克先生。但是，这确实解决了OP在给定要求和内容上的问题。它可以根据需要进行调整。它起作用——尽管你受到固定宽度和位置的限制定位。如果内容扩展，它会变得一团糟。这是真的，施瓦布洛克先生。但是，这确实解决了OP在给定需求和内容方面的问题。它可以根据需要进行调整。