Question

我正在尝试创建餐厅菜单。我希望每个菜单项都这样格式化：

马苏里拉奶酪棒（9.95美元）

为此，我有以下html：

<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>

我在不同的元素中具有商品名称和价格，因为我想减小价格，更改颜色等...

我的问题是使两个元素彼此相邻出现，因为h3和p都是块元素。这是我想出的解决方案。解决方法一：

.menu-item{
  display: inline;
}

.price{
  display: inline;
}

并在每个条目的末尾添加一个换行符：

<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
<br />

这可行，但是我觉得这不是正确的方法，应该使用CSS来完成。我还考虑了以下两种解决方法：

<h3 class="menu-item">Mozzarella Sticks <span class="price">5.95</span></h3>

这将使我可以将价格样式与菜单项分开，但是在h3中包含价格仍然感觉很奇怪。

最后，我看到您可以在两个元素上都设置一个width，然后应用float: left;和float: right;，但是这弄乱了间距，因为我希望元素出现彼此相邻。

有什么建议吗？是我列出的任何一种解决此问题的好方法，还是有更好的解决方案？

Answer 1

尝试使用此网格布局。您可以根据自己的喜好自定义每个块。您可以通过插入1fr

添加另一列

.menu{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'a b';
}

.menu-item{
grid-area: a;
text-align: center;
font-size: 20px;	
}

.price{
grid-area: b;
text-align: center;
font-size: 18px;
}

	<div class="menu">
	<div class="menu-item">Mozzarella Sticks</div>
	<div class="price"><i>($9.95)</i></div>		
</div>

Answer 2

您可以考虑为每个带有子项的商品创建名称和价格元素。
下面，我将flexbox用于项目布局。

#menuItems {
  margin: 0;
  padding: 1em;
}

.menuItem {
  margin: 0 0 1em;
  display: flex;
}

.menuItemTitle {
  flex: 0 0 150px;
  margin: 0 1em 0 0;
  font-size: 1em;
}

.menuItemPrice::before {
  content: "$";
}

<ul id="menuItems">
  <li class="menuItem">
    <h3 class="menuItemTitle">Mozzarella Sticks</h3>
    <span class="menuItemPrice">5.95</span>
  </li>
  <li class="menuItem">
    <h3 class="menuItemTitle">Another Item</h3>
    <span class="menuItemPrice">10.50</span>
  </li>
  <li class="menuItem">
    <h3 class="menuItemTitle">Third Item with a Longer Name</h3>
    <span class="menuItemPrice">10.50</span>
  </li>
</ul>

Answer 3

您可以将宽度设置为百分比，例如分别为80％和20％。如果设置了display: inline-block，则无需设置任何浮点数。元素保持块属性，但像实际文本一样保留在文本流中。

即使这单独起作用，我还是建议保持更好和更清晰的语义html划分，例如提到的ul showdev 或至少包含一个div每对夫妇。

Answer 4

我的问题是使两个元素彼此相邻出现 h3和p都是块元素。这是我的解决方案跟上。解决方法一：

通常，如果您希望两个 block元素彼此相邻出现而不使用较新的布局方法（flexbox和css网格）。您可以浮动这些元素，然后为这些元素添加“清除修补程序”，这是您执行此操作的两种方法。

浮动元素，添加一个额外的div，添加clearfix
浮动元素，在“之后”添加CSS伪元素，添加clearfix

方法1：添加额外的div

<style type="text/css">    
  .clearfix{
    display: block;
    clear: both;
  }

  h3{
    float:left;
  }

  p{
    float:left;
  }
</style>
<div class="my-container">
    <h3>Hello</h3><p>World</p>
    <div class="clearfix"></div>
</div>

方法2：在其后添加伪元素

<style type="text/css">    
  .clearfix::after {
    display: block;
    clear: both;
  }

  h3{
    float:left;
  }

  p{
    float:left;
  }
</style>
<div class="my-container clearfix">
    <h3>Hello</h3><p>World</p>
</div>

请注意，在方法2上，clearfix类已添加到容器中。此外，请注意，伪CSS元素::after已添加到.clearfix。

这可以让我将价格样式与菜单项分开，但是将价格包含在h3中仍然感觉很奇怪。

我认为你是对的。构建HTML应该是语义的。这基本上意味着您的标记/代码必须是不言自明的或有意义的。在您要实现的目标的上下文中，此处的h3（IMHO）不适合您实际上在尝试表达或所做的事情。我之所以这么说是因为您要显示“菜单项”列表，而h3的定义是标题，因此该元素不适合它要显示的内容。我的建议是，不要使用h3，而是使用列表，类似于上面的答案。这将使您的HTML代码更具语义，现在您可以使用前面提到的其他方法而不会显得怪异（因为span在h3内）。它看起来类似于下面的代码...

<ul id="menuItems">
  <li class="menuItem">Mozzarella Sticks<span class="menuItemPrice">5.95</span</li>
</ul>

顺便说一句，我上面的建议只是我的意见，所以请带一点盐。有关语义HTML的更多信息。您可以查看下面的链接

希望这会有所帮助！：）

并排放置两个块元素

4 个答案: