css 当我将一个有序列表居中时，数字会转到列表的单独一行

vwkv1x7d 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(134)

正如标题中所述，我text-align ed到中心，并使用list-style-position: inside，使数字将去旁边的名单，而是它去一个单独的行。

<ol>
  <li>
    <h3>Gather ingredients and preheat oven:</h3>
    Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.
  </li>
  <li>
    <h3>Mix dry ingredients:</h3>
    In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.
  </li>
  <li>
    <h3>Mix wet ingredients:</h3>
    In a medium bowl, whisk together milk, butter (or oil), and egg.
  </li>
</ol>

* {
  text-align: center;
}

ol {
  list-style-position: inside;
  padding: 0;
}

列表就变成了

我希望它的数字1和标题在同一行。

css

来源：https://stackoverflow.com/questions/76536967/when-i-center-an-ordered-list-the-number-goes-to-a-separate-line-to-the-list

4条答案

按热度按时间

u4dcyp6a1#

h3标题是块级元素。使用list-style-position: inside时，列表标记编号显示为内联文本。h3块容器与其前后的内联内容是分开的。

* {
  text-align: center;
}

ol {
  list-style-position: inside;
  padding: 0;
}

<ol>
  <li>
    inline text<h3>Gather ingredients and preheat oven:</h3>
    Preheat oven to 200 degrees
  </li>
</ol>

您可以将h3更改为display: inline。但是，您需要将额外的文本放入块级容器中，例如div或p。
（如果使用display: inline-block，则将呈现非折叠块边距，这将使每个h3和p容器之间的边距加倍。

* {
  text-align: center;
}

ol {
  list-style-position: inside;
  padding: 0;
}

h3 {
  display: inline;
}

<ol>
  <li>
    <h3>Gather ingredients and preheat oven:</h3>
    <p>Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.</p>
  </li>
  <li>
    <h3>Mix dry ingredients:</h3>
    <p>In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.</p>
  </li>
  <li>
    <h3>Mix wet ingredients:</h3>
    <p>In a medium bowl, whisk together milk, butter (or oil), and egg.</p>
  </li>
</ol>

另一种方法是将h3更改为display: list-item，将li更改为display: block

* {
  text-align: center;
}

ol {
  list-style-position: inside;
  padding: 0;
}

li {
  display: block;
}

h3 {
  display: list-item;
}

<ol>
  <li>
    <h3>Gather ingredients and preheat oven:</h3>
    Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.
  </li>
  <li>
    <h3>Mix dry ingredients:</h3>
    In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.
  </li>
  <li>
    <h3>Mix wet ingredients:</h3>
    In a medium bowl, whisk together milk, butter (or oil), and egg.
  </li>
</ol>

赞(0）回复(0）举报 2023-06-25

daupos2t2#

试试这个：

* {
            text-align: center;
        }

        ol {
            list-style-position: inside;
            padding: 0;
        }
        ol h3{
            display: inline-block;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>
            <h3>Gather ingredients and preheat oven:</h3>
            <p>Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.</p>
        </li>
        <li>
            <h3>Mix dry ingredients:</h3>
            <p>In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.</p>
        </li>
        <li>
            <h3>Mix wet ingredients:</h3>
            <p>In a medium bowl, whisk together milk, butter (or oil), and egg.</p>
        </li>
    </ol>
</body>

</html>

您将得到以下结果[预期结果] [1]：https://i.stack.imgur.com/BaHg6.png

赞(0）回复(0）举报 2023-06-25

ac1kyiln3#

为什么不这样使用呢？

.text-center {
  text-align: center;
}

<div class="text-center">
  <h3>1. Gather ingredients and preheat oven:</h3>
  Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.

  <h3>2. Mix dry ingredients:</h3>
  In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.

  <h3>3. Mix wet ingredients:</h3>
  In a medium bowl, whisk together milk, butter (or oil), and egg.
</div>

赞(0）回复(0）举报 2023-06-25

iklwldmw4#

这里，<li>同时应用于标题和标题下方的文本。
记住，HTML中的每个标题都是一个块级元素，没有任何标签的文本被视为inline-block元素，除非你使用某些标签，例如段落标签。
如果文本只在list元素中，那么它会像您预期的那样工作。但是由于在它们之间有一个块级别的元素，所以它自己占据了整个块。因此，它导致了数字和文本的分离。
要解决这个问题，你必须使标题元素内联块。
按照Hasti Kukadiya的建议，代码应该是这样的：

ol {
  ...
  list-style-position: inside;
  ...
}
ol h3 {
  ...
  display: inline-block;
  ...
}

赞(0）回复(0）举报 2023-06-25

我来回答

css 当我将一个有序列表居中时，数字会转到列表的单独一行

4条答案

相关问题

热门标签

最新问答