0

我的食物菜单在 Firefox 和 IE 上运行良好，但在 Chrome 上却完全不行。dt 标签与其他 dd 标签重叠。我试图从问题列表中搜索，但找不到正确的。我多次尝试使用浮动和溢出，但一直无法解决这个问题。

您的建议将不胜感激。我真的很想停止挠头，因为我已经这样做了几个月了。

#menucontent dt {
float: left;
padding-right: 5px;
font-weight: bold;
}

#menucontent dd.price {
float: right;
color: #E1DEDE;
}

#menucontent dd.ingredients {
float: left;
width: 100%;
padding: 0px 0px 5px 0px;
color: #FAD98A;
}

可以从此链接单击我的食物菜单 https://dl.dropbox.com/u/13748701/dinner.html

它的 CSS 源在这里https://dl.dropbox.com/u/13748701/style.css

4

2 回答 2

1

首先：去掉所有的空<p>标签！它们不是必需的。想要在元素之间创建空间？使用margin！

对于您的问题：将 a 添加clear: both;到 h2. 所以你得到这个：

h2 {
  padding: 3px 15px 0px 0px;
  font-weight: normal;
  font-size: 20px;
  color: #F7E4B5;
  clear: both;
}
于 2012-05-27T07:54:22.460 回答
0

尝试在 css 中添加overflow: hidden;到您的dl元素：

#menucontent dl {
  overflow: hidden;
}
于 2012-05-27T07:45:12.903 回答