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>

上記を3行で取得するにはどうすればよいですか。つまり、1行にカラーブロックと数字が表示されます。

4

2 に答える 2

4

まず、同じIDを持つ複数の要素があります。それはそのようには機能しません。IDは一意であり、複数の要素が同じクラスを持つことができます。

次に、ボックスのdiv内に空のスパンタグを配置することをお勧めします。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 に答える