Question

我对Html还是很陌生，正在尝试将列表中的项目放入盒子中。但是，在尝试使用样式类而不是为每个项目进行硬编写时，文本不再放置在框中。仅当我居中放置文本时，才会出现此问题。鉴于这只是一个小文件，我将整个代码粘贴到了问题中。

.EventBorder {
  border: 3px;
  border-style: solid;
  border-color: #287EC7;
  padding: 2em;
}

<h1>
  <center>Itineree</center>
</h1>
<h2>
  <center>~ <i>Plan Your Brisbane Event Schedule</i> ~</center>
</h2>

<h4>
  <center>Below is a Visual Itinerary of the Events you have Selected</center>
</h4>

<p class="EventBorder">
  <center>Event 1: This is List Option 1</center>
</p>
<p class="EventBorder">
  <center>Event 2: This is List Option 2</center>
</p>
<p class="EventBorder">
  <center>Event 3: This is List Option 3</center>
</p>
</ul>

我只希望文本在边框内。

Answer 1

如果您有used a validator，就会发现您的问题。

<center>元素（已于1996年被CSS取代）不能是<p>元素的子元素。

因此，<center>起始标记隐式结束了<p>元素，因此它和其中的文本不在<p>内，因此不在其边界之内。

Answer 2

您的HTML中有几个错误，但是我建议您删除center标签并改用CSS。另外，在body标签的末尾有一个ul结束标签，您应该删除该标签。

您可以添加yourElement {text-align：center}以获得相同的结果。

Answer 3

<center>标签is technically supported，但建议不要再使用它。（感谢@Quentin进行澄清）

您可以只删除标签，而使用text-align: center将.EventBorder类和标题的文本居中。

h1, h2, h4, .EventBorder{
   text-align: center
}

.EventBorder {
  border: 3px;
  border-style: solid;
  border-color: #287EC7;
  padding: 2em;
}

<h1>
  Itineree
</h1>
<h2>
  ~ <i>Plan Your Brisbane Event Schedule</i> ~
</h2>

<h4>
  Below is a Visual Itinerary of the Events you have Selected
</h4>

<p class="EventBorder">
  Event 1: This is List Option 1
</p>
<p class="EventBorder">
  Event 2: This is List Option 2
</p>
<p class="EventBorder">
  Event 3: This is List Option 3
</p>
</ul>

Answer 4

j08691指出，<li>不再使用。另外-列表元素只能包含h1, h2, h4 { text-align: center; } .events { list-style: none; padding: 0; } .events li { border: 3px; border-style: solid; border-color: #287EC7; padding: 2em; text-align: center; }标记。

一个更好的选择是：

<h1>
    Itineree
</h1>
<h2>
    ~ <i>Plan Your Brisbane Event Schedule</i> ~
</h2>

<h4>
    Below is a Visual Itinerary of the Events you have Selected
</h4>

<ul class="events">
    <li>
        Event 1: This is List Option 1
    </li>
    <li>
        Event 2: This is List Option 2
    </li>
    <li>
        Event 3: This is List Option 3
    </li>
</ul>

->select(
                "shipments.id as shipment_id",
                "shipments.fulfillment_id",
                "shipments.shipped_address_id",
                "shipments.courrier_id",
                "shipments.status",
                "shipments.is_intro",
                "shipments.is_express",
                "shipments.shipment_batch_id",
                "shipments.intro_shipment_date",
                "shipments.intro_shipped_at",
                "shipments.tracking_number",
                "shipments.is_gift",
                "shipments.ship_unit",
                "shipments.shipment_notes",
                "shipments.is_one_time_product",
                "shipments.one_time_product_shipment_date",
                "shipments.one_time_product_shipped_at",
                "shipments.shipment_options",
                "shipments.is_migrated",
                "shipments.migration_has_error",
                "shipments.in_process_date",
                "shipments.shipment_date_at",
                "shipments.link",
                )

HTML边框放置

4 个答案: