0

我有以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#scale div {
    float: left;
    width: 75px;
    padding: 5px;
    border: 0px #333 solid;
}
</style>
</head>
<body>
<div style="font-size: 10px;" id="scale">
    <div id="box" align="center" style="background:#88ff88;" >&nbsp</div>
    <div id="a">&nbsp1 &nbsp&nbsp</div>
    <div id="box" align="center" style="background:#ff8888;">&nbsp</div>
    <div id="b">&nbsp2 &nbsp&nbsp</div>
    <div id="box" align="center" style="background:#ff88ff;">&nbsp</div>
    <div id="c">&nbsp3 &nbsp&nbsp</div>
</div>
</body>
</html>

我怎样才能在三行上获得上述内容。即一个色块和一个数字在一行。

4

2 回答 2

4

首先，您有多个具有相同 ID 的元素。它不是那样工作的。ID是唯一的，多个元素可以有同一个类。

其次，我建议在您的盒子的 div 中只使用一个空的 span 标签。默认情况下，Divs 显示块（占用整行），因此您可以拥有一个内联块跨度（仅占用所需的空间，但被视为块元素），并设置宽度和高度以及旁边的数字。

此外，内联样式使代码看起来凌乱且难以阅读和使用。您应该将 CSS 与 HTML 分开。

<div id="scale">
  <div id="a"><span></span>1</div>
  <div id="b"><span></span>1</div>
  <div id="c"><span></span>1</div>
</div>

#scale div span {
  width: 100px;
  height: 20px;
  display: inline-block;
}

#a span{
  background-color:#00F;
}

#b span{
  background-color:#0F0;
}

#c span{
  background-color:#F00;
}

演示

于 2012-09-09T19:23:22.243 回答
1

在你的style标签中，在你display: inline-block所有的盒子 div 上使用。

于 2012-09-09T19:22:28.330 回答