Css DIV带内跨距/DIV的水平自动边距

我想做的事情很简单，但今天我的大脑却无法正常工作

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

其中.outer为100%宽度，每个文本元素在其中等距分布。另外，如果更简单的话，我可以为内部元素使用跨距。

只需应用这个css

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

看到这个了吗

另外，请注意，单个内部div的宽度之和必须小于外部div的总宽度，那么只有它们才会显示为向左浮动

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

---

某些属性显然是为了清晰地标记它们。

您也尝试过CSS中的一些内容吗？我尝试过加载，但希望尽可能避免指定宽度。。。因此，如果我添加5个元素，我不必改变宽度，它就可以计算出来。@PaulSmith:如果不指定宽度，绝对不可能得到三个完全均匀的宽度框。即使将其显示为表格单元格，这些单元格仍会根据其中的内容自动调整宽度，不会产生均匀的宽度。

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