Question

说我有以下内容：

<div style="border: 1px solid black; width:300px;">
<span style="background: red; width:100px;">one</span>
<span style="background: yellow; width:100px;">two</span>
<span style="background: red; width:100px;">three</span>
</div>

我可以应用什么CSS来使跨度内的间距相等？

Answer 1

我必须非常不同意其他答案，建议inline-block和float:left，因为这些解决方案会为您提供浮动布局。这在大多数时候可能都很好，我见过33.33％+ 33.33％+ 33.33％＆gt; 100％，通常在Android设备上。这会将最后一个单元格推到下一行。

由于您尝试创建表格外观，我建议使用表格显示样式：

<style>
    #myTable {
        display: table;
        border: 1px solid black;
        width: 300px;
    }

    #myTable > * {
        display: table-cell;
        width: 33.33%;
    }
</style>
<div id="myTable">
    <span style="background: red">one</span>
    <span style="background: yellow">two</span>
    <span style="background: red">three</span>
</div>

Answer 2

Spans是内联元素，具有各自内容的宽度。如果要设置特定宽度，请使用div或p等块元素，并使用float:left;

水平排列

<div style="border: 1px solid black; width:300px;">
   <div style="float:left; background: red; width:100px;">one</div>
   <div style="float:left; background: yellow; width:100px;">two</div>
   <div style="float:left; background: red; width:100px;">three</div>
</div>

一般来说，span用于格式化，例如设置字体样式等。div等块元素可用于布局和定位。

您可以调整spans来执行相同操作，但不建议这样做。 Divs就是出于这个目的。

Answer 3

尝试添加'float：left;'你的跨度风格。

Answer 4

   span {
     display: inline-block;
     width: 33.33%;
     text-align: center;
   }

这应该可行，删除跨度中的每个100px宽度。默认情况下，Spans是内联元素，因此直接对它们应用width属性不起作用。首先，你必须“封锁”它们。如果您使用display: inline-block;浏览器遇到问题，可以改用float: left;。

Answer 5

除了之前的答案之外，我强烈建议不要在HTML中使用样式内联。您应该尝试将事物分开，样式属于CSS文件/文件。

此外，尝试查看网格系统，这使得这种格式更容易和可维护。很好的例子是：

http://960.gs/

http://cssgrid.net/

或

http://twitter.github.com/bootstrap/（一个增加一些额外功能的完整CSS框架）

还有其他几个，只是将这些作为示例发布。

如何在div中使多个跨距等宽

5 个答案: