Question

我正在尝试使用<span>和<div>概念创建一个表。

但桌子没有正确地组合在一起。我找不到问题所在。请告诉我问题是什么。我必须在同一行中生成4到5行。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style>
            .line1
            { 
               background-color:#AAAAAA;
               height: 150px;
               width: 1px;
               display: block;
            } 
            .line2
            { 
               background-color:#CE5611;
               height: 150px;
               width: 1px;
               display: block;
               margin-left: 121px;
            } 
        </style>
    </HEAD>    
    <body>
        <div id="a1" style='padding-left: 14px;width: 100px;'>
            <span>h1</span>
            <span class="line1"></span>
            <span>h2</span>
            <span class="line2"></span>
            <span>h3</span>
            <span class="line1"></span>
        </div>
    </body>
</html>

Answer 1

你真的希望被分类的跨度有display: block吗？这迫使每个人分开。从功能上讲，<span style="display: block">与<div>有点相同（而<div style="display: inline">与<span>有点相同。

你可能正在寻找display: inline-block。这使您能够像您一样阻止属性（高度，宽度），但仍然让它在周围内容中移动。另一种方法是使用display: table-cell。有display支持here的图表。

Answer 2

相反，这种方式：

<div id="a1" style='padding-left: 14px;width: 100px;'>
                <span>h1</span>
                <span class="line1"></span>
                <span>h2</span>
                <span class="line2"></span>
                <span>h3</span>
                <span class="line1"></span>
</div>

做

#wrapper .content{
  float:left
  width:100px;
  padding:.5em;
}

#wrapper .content span{
 font-weight:bold;
}


<div id="wrapper">
  <div class="content"><span>line 1</span></div>
  <div class="content"><span>line 2</span></div>
  <div class="content"><span>line 3</span></div>
</div>

你明白了......

Answer 3

您应该使用<table>。

Answer 4

我更喜欢使用li和span代码，而不是div和span。它使操作更容易。 li为block和span inline-block。

使用span创建表

4 个答案: