內部跨度DIV水平自動保證金/ div

Question

我想要做的是如此簡單，但我的大腦拒絕今天的功能！

<div id="outer"> 
    <div class="inner">TEXT 1</div> 
    <div class="inner">TEXT 2</div> 
    <div class="inner">TEXT 3</div> 
</div> 

應該視覺顯示如下：

|---------------------------------------------------| 
| TEXT 1   TEXT 2   TEXT 3  | 
|---------------------------------------------------| 

哪裏.outer是100％的寬度，並且每個文本元素內被相等地間隔開。 PS。如果這更容易，我可以使用跨度作爲內部元素。

Answer 1

只是將此CSS

#outer{ 
    width:100%; 
    display:inline-block; 
    border:1px solid #CCC; 
} 
.inner{ 
    float:left; 
    width:29%; 
    text-align:Center; 
    border:1px solid green; 
} 

看到此fiddle

此外，請注意，各個內的div的寬度的總和必須小於外，則只有總寬度他們會出現浮動左邊

Answer 2

#outer { 
    display: inline-block; 
    width: 100%; 
} 
.inner { 
    float: left; 
    width: 30%; 
    margin: 5px; 
    background-color: red; 
} 

一些屬性顯然是標記在this fiddle明確他們。