Html 在字段集中均匀地隔开三个按钮

所以我只想在底部留出三个按钮，这样就不会有任何运气了。。。有人能帮我做CSS吗

这是一把小提琴：

我希望所有三个按钮都位于最低输入字段下方，并在字段集的左右边界之间均匀分布。到目前为止，我能做的最好的是让他们显示内联

HTML

<form action="/" id="formElem1" method="post" name="formElem">    <fieldset class="step">
        <legend>Search</legend>        
        <table class="inlineTable">
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="OriginalStatNum">Life Master</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="OriginalStatNum" maxlength="10" name="OriginalStatNum" style="width:80px;" type="text" value="" />
                    </div>             
                </td>
                <td>
                    <div class="editor-label">
                        <label for="ReportsToStat">Reports to Stat</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="ReportsToStat" maxlength="1" name="ReportsToStat" style="width:80px;" type="text" value="" />
                    </div>                
                </td>
                <td>
                    <div class="editor-label">
                        <label for="OriginalMarketSegment">Market Segment</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="OriginalMarketSegment" maxlength="3" name="OriginalMarketSegment" style="width:80px;" type="text" value="" />
                    </div>                          
                </td>                    
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="Pensgc">PENSGC</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="Pensgc" maxlength="3" name="Pensgc" style="width:80px;" type="text" value="" />
                    </div>                         
                </td>
                <td colspan="2">
                    <div class="editor-label">
                        <label for="OriginalName">Name (If No Life Master)</label>
                    </div>
                    <div class="editor-label" style="margin-top: 5px;">
                        <input class="AlphaNumOnly" id="OriginalName" maxlength="255" name="OriginalName" style="width:160px;" type="text" value="" />
                    </div>                       
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="OriginalEffectiveDate">Effective Date</label>
                    </div>
                    <div class="editor-field">
                        <input data-val="true" data-val-date="The field Effective Date must be a date." id="OriginalEffectiveDate" name="OriginalEffectiveDate" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="OriginalCancelDate">Cancel Date</label>
                    </div>
                    <div class="editor-field">
                        <input data-val="true" data-val-date="The field Cancel Date must be a date." id="OriginalCancelDate" name="OriginalCancelDate" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="ExceptionName">Exception List</label>
                    </div>
                    <div class="editor-field">
                        <select id="ExceptionName" name="ExceptionName"><option value=""> </option>
<option value="C">Starting with C</option>
<option value="D">Starting with D</option>
<option value="T">LStarting with T</option>
<option value="A">Starting with A</option>
<option value="N">Starting with N</option>
<option value="X">WHATEVER</option>
</select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="LastUpdateId">Last Update By</label>
                    </div>
                    <div class="editor-field">
                        <input id="LastUpdateId" name="LastUpdateId" readonly="readonly" style="width: 80px;" type="text" value="" />
                    </div>
                </td>
            </tr>                
        </table>       
        <table class="inlineTable" style="margin-right: 0px;">
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="AgencyName">Agency Name</label>
                    </div>
                    <div class="editor-field">
                        <input class="noInput" id="AgencyName" name="AgencyName" readonly="readonly" type="text" value="" />
                    </div>                        
                </td>
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="CompanyCode">Company Code</label>
                    </div>
                    <div class="editor-field">
                        <input id="CompanyCode" name="CompanyCode" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        <label for="SecSellerCd">SEC Seller Code</label>                            
                    </div>
                    <div class="editor-field">
                        <input id="SecSellerCd" name="SecSellerCd" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="DssMrktSeg">Market Segment</label>
                    </div>
                    <div class="editor-field">
                        <input id="DssMrktSeg" name="DssMrktSeg" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        <label for="LifeAnn">Life/Annuity</label>
                    </div>
                    <div class="editor-field">
                        <input id="LifeAnn" name="LifeAnn" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>                        
                </td>
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="ConnCode">Contract Code</label>  
                    </div>
                    <div class="editor-field">
                        <input id="ConnCode" name="ConnCode" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        <label for="CancelRsn" readonly="readonly" style="width:80px;">Cancel RSN</label>
                    </div>
                    <div class="editor-field">
                        <input id="CancelRsn" name="CancelRsn" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="ReportsToAgn">Reports to Agency</label>
                    </div>
                    <div class="editor-field">
                        <input id="ReportsToAgn" name="ReportsToAgn" readonly="readonly" type="text" value="" />
                    </div>
                </td>
            </tr>
        </table>
        <span class="ButtonContainer">
            <button type="submit" class="submitButton" >Search</button>
            <button type="submit" class="submitButton" >Save</button>
            <button class="clearButton" id="ClearSearch">Clear</button>             
        </span>
    </fieldset>    
</form>

<tr>
     <td colspan="2" class="ButtonContainer">
            <button type="submit" class="submitButton" >Search</button>
            <button type="submit" class="submitButton" >Save</button>
            <button class="clearButton" id="ClearSearch">Clear</button>      
     </td>
</tr>

---

HTML和CSS的一些问题

当没有id为steps的元素时，CSS会引用steps。您的表单是id

formElem1

。将CSS中的

#步骤表单

或

#步骤

替换为

#步骤1

JSFiddle： 在不修复CSS的情况下，这是一种黑客行为，但它是有效的。我建议您相应地调整CSS和HTML

HTML JSFiddle：（不合法的解决方案）将此添加到CSS中， 同时将#ButtonContainer更改为.ButtonContainer

CSS

*{
    margin:0px;
    padding:0px;
}
html {
    background-image: url("/Images/Swiftnet-Background.jpg");
    margin: 0;
    padding: 0;
}
body{
    color:#444444;
    font-size:13px;
    font-family:"Century Gothic", Helvetica, sans-serif;

}
#content{
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px;
    margin-left: -350px;
    width:704px;
    height:100%;
    text-align:center;
}
#wrapper{
    border:2px solid #fff;
    background-color:#f9f9f9;
    width:700px;
    overflow:hidden;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;

}
#steps{
    width:700px;
    overflow:hidden;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
.step{
    float:left;
    width:700px;
}
#navigation{
    height:45px;
    background-color:#e9e9e9;
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
#navigation ul{
    list-style:none;
    float:left;
    margin-left:22px;
}
#navigation ul li{
    float:left;
    margin:0px 2px;
    padding-left: 25px;
}
#navigation ul li a{
    display:block;
    height:45px;
    background-color:#444;
    color:#777;
    outline:none;
    font-weight:bold;
    text-decoration:none;
    line-height:45px;
    padding:0px 20px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#f0f0f0;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.09, rgb(240,240,240)),
        color-stop(0.55, rgb(227,227,227)),
        color-stop(0.78, rgb(240,240,240))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(240,240,240) 9%,
        rgb(227,227,227) 55%,
        rgb(240,240,240) 78%
        )
}
#navigation ul li a:hover,
#navigation ul li.selected a{
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}
span.checked{
    background:transparent url(../images/checked.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
span.error{
    background:transparent url(../images/error.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
#steps form fieldset{
    border:none;
    padding-bottom:20px;
}
#steps form legend{
    text-align:left;
    background-color:#f0f0f0;
    color:#666;
    font-size:24px;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
    float:left;
    width:700px;
    padding:5px 0px 5px 10px;
    margin: 10px 0px 20px -20px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
}
#steps form p{
    float:left;
    clear:both;
    margin:5px 0px;
    background-color:#f4f4f4;
    border:1px solid #fff;
    width:400px;
    padding:10px;
    margin-left:100px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
    width:160px;
    float:left;
    text-align:right;
    margin-right:15px;
    line-height:26px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    background: #ffffff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 5px;
    width: 200px;
    float:left;
}
#steps form input:focus{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background-color:#FFFEEF;
}
#steps form p.submit{
    background:none;
    border:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
#steps form button {
    border:none;
    outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    /*display: inline;*/
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    margin-top:100px;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}
#steps form button:hover {
    background:#d8d8d8;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

#steps form input[readonly="readonly"]{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background-color:whitesmoke;
}

#ButtonContainer {
    display: inline;
    margin-top: 100px;
}

/*.button {
    border:none;
    outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding-top: 50px;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#4797ED;
}*/


/* TABLES */
.inlineTable {
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

/* FORMS */
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
    font-size: 13px;
    text-align: left;
}

.editor-box-label 
{
    padding-top: 8px;
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 8px;
    color: #696969;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
    color: Black;
    font-size: 8px;
}

.ButtonContainer button{
    width:32%;
}

现在将ButtonContainer放在另一个表格行中

HTML

<form action="/" id="formElem1" method="post" name="formElem">    <fieldset class="step">
        <legend>Search</legend>        
        <table class="inlineTable">
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="OriginalStatNum">Life Master</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="OriginalStatNum" maxlength="10" name="OriginalStatNum" style="width:80px;" type="text" value="" />
                    </div>             
                </td>
                <td>
                    <div class="editor-label">
                        <label for="ReportsToStat">Reports to Stat</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="ReportsToStat" maxlength="1" name="ReportsToStat" style="width:80px;" type="text" value="" />
                    </div>                
                </td>
                <td>
                    <div class="editor-label">
                        <label for="OriginalMarketSegment">Market Segment</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="OriginalMarketSegment" maxlength="3" name="OriginalMarketSegment" style="width:80px;" type="text" value="" />
                    </div>                          
                </td>                    
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="Pensgc">PENSGC</label>
                    </div>
                    <div class="editor-field">
                        <input class="AlphaNumOnly" id="Pensgc" maxlength="3" name="Pensgc" style="width:80px;" type="text" value="" />
                    </div>                         
                </td>
                <td colspan="2">
                    <div class="editor-label">
                        <label for="OriginalName">Name (If No Life Master)</label>
                    </div>
                    <div class="editor-label" style="margin-top: 5px;">
                        <input class="AlphaNumOnly" id="OriginalName" maxlength="255" name="OriginalName" style="width:160px;" type="text" value="" />
                    </div>                       
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="OriginalEffectiveDate">Effective Date</label>
                    </div>
                    <div class="editor-field">
                        <input data-val="true" data-val-date="The field Effective Date must be a date." id="OriginalEffectiveDate" name="OriginalEffectiveDate" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="OriginalCancelDate">Cancel Date</label>
                    </div>
                    <div class="editor-field">
                        <input data-val="true" data-val-date="The field Cancel Date must be a date." id="OriginalCancelDate" name="OriginalCancelDate" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="ExceptionName">Exception List</label>
                    </div>
                    <div class="editor-field">
                        <select id="ExceptionName" name="ExceptionName"><option value=""> </option>
<option value="C">Starting with C</option>
<option value="D">Starting with D</option>
<option value="T">LStarting with T</option>
<option value="A">Starting with A</option>
<option value="N">Starting with N</option>
<option value="X">WHATEVER</option>
</select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="LastUpdateId">Last Update By</label>
                    </div>
                    <div class="editor-field">
                        <input id="LastUpdateId" name="LastUpdateId" readonly="readonly" style="width: 80px;" type="text" value="" />
                    </div>
                </td>
            </tr>                
        </table>       
        <table class="inlineTable" style="margin-right: 0px;">
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="AgencyName">Agency Name</label>
                    </div>
                    <div class="editor-field">
                        <input class="noInput" id="AgencyName" name="AgencyName" readonly="readonly" type="text" value="" />
                    </div>                        
                </td>
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="CompanyCode">Company Code</label>
                    </div>
                    <div class="editor-field">
                        <input id="CompanyCode" name="CompanyCode" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        <label for="SecSellerCd">SEC Seller Code</label>                            
                    </div>
                    <div class="editor-field">
                        <input id="SecSellerCd" name="SecSellerCd" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="DssMrktSeg">Market Segment</label>
                    </div>
                    <div class="editor-field">
                        <input id="DssMrktSeg" name="DssMrktSeg" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        <label for="LifeAnn">Life/Annuity</label>
                    </div>
                    <div class="editor-field">
                        <input id="LifeAnn" name="LifeAnn" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>                        
                </td>
            </tr>
            <tr>
                <td>
                    <div class="editor-label">
                        <label for="ConnCode">Contract Code</label>  
                    </div>
                    <div class="editor-field">
                        <input id="ConnCode" name="ConnCode" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        <label for="CancelRsn" readonly="readonly" style="width:80px;">Cancel RSN</label>
                    </div>
                    <div class="editor-field">
                        <input id="CancelRsn" name="CancelRsn" readonly="readonly" style="width:80px;" type="text" value="" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="editor-label">
                        <label for="ReportsToAgn">Reports to Agency</label>
                    </div>
                    <div class="editor-field">
                        <input id="ReportsToAgn" name="ReportsToAgn" readonly="readonly" type="text" value="" />
                    </div>
                </td>
            </tr>
        </table>
        <span class="ButtonContainer">
            <button type="submit" class="submitButton" >Search</button>
            <button type="submit" class="submitButton" >Save</button>
            <button class="clearButton" id="ClearSearch">Clear</button>             
        </span>
    </fieldset>    
</form>

<tr>
     <td colspan="2" class="ButtonContainer">
            <button type="submit" class="submitButton" >Search</button>
            <button type="submit" class="submitButton" >Save</button>
            <button class="clearButton" id="ClearSearch">Clear</button>      
     </td>
</tr>

搜寻
拯救
清楚的

---

以下是

尝试在CSS中添加以下内容：

.button容器{
显示：块；
宽度：100%；
溢出：自动；
文本对齐：对齐；
线高：0；
垂直对齐：顶部；
填充：10px 0；/*根据需要调整*/
}
.按钮容器按钮{
余量：0 10px；/*根据需要调整*/
}
.按钮容器：之后{
内容：''；
显示：内联块；
垂直对齐：顶部；
宽度：100%；
线高：1.5；
}

请参见演示：

将

.ButtonContainer

元素转换为100%宽度的块级元素，并设置

溢出：自动

（或

清除：两个

）以清除浮动的内联表

使用

text align:justify

获得间距均匀的按钮

但是，这仅在容器中有两行以上时有效，因此使用伪元素生成高度为零的100%宽的空内联块

根据需要调整边距和填充，以获得正确的空白平衡

适用于大多数现代浏览器

在Firefox中，它看起来像：

---

CSS中有额外的元素用于布局。只是试着专注于这个单独的字段集。你在小提琴上看到的是它在页面上的显示方式。是的。。。那不是我想要的。我希望表格并排显示，并在页面最低输入框下方显示按钮。你的提琴显示了垂直堆叠在页面一半上的表格，以及在页面右半部分执行相同操作的按钮。我发布了一个可行的解决方案，但我再次建议你在解决此问题之前相应地调整CSS和HTML。如果我需要添加第四个按钮，我应该调整哪个CSS属性来实现这一点？在CSS上完成noob，所以欣赏这篇文章。只需添加额外的按钮（在合理范围内），它们就会均匀地将自己隔开，这是一个相当巧妙的小技巧。