在一个fieldset里面均匀地放置三个按钮

时间：2014-07-09 22:37:43

标签： html css

所以我只想在底部划出三个按钮而没有任何运气......任何人都可以帮助CSS吗？

这是一个工作小提琴：http://jsfiddle.net/Am8vc/

我将所有三个按钮都放在最低输入字段之下，并在字段集的左右边框之间均匀分布。到目前为止，我能做的最好的事情就是让它们显示内联......

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>

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;
}

3 个答案:

答案 0 :(得分：1)

您的HTML和CSS存在一些问题。

当没有标识为#steps的元素时，您的CSS引用steps。您的表单为ID formElem1。将CSS中的#steps form或#steps替换为#formElem1。

JSFiddle：DEMO

不修复你的CSS，这是一个黑客，但它的工作原理。我建议您相应地调整CSS和HTML

HTML 

<span class="ButtonContainer">
    <button type="submit" class="submitButton submitButton--1" >Search</button>
    <button type="submit" class="submitButton submitButton--2" >Save</button>
    <button class="clearButton" id="ClearSearch">Clear</button>             
</span>

CSS 

.submitButton,
.clearButton {
    margin-top: 75px;
    margin-bottom: 25px;
    position: relative;
}

.submitButton--1 {
    left: -403px;
    margin-left: 20px;
}
.submitButton--2 {
    left: -125px;
}
.clearButton {
    left: 150px;
}

JSFiddle：DEMO（不合理的解决方案）

答案 1 :(得分：1)

将此添加到您的CSS， 还要将#ButtonContainer更改为.ButtonContainer

<强> CSS 

.ButtonContainer button{
    width:32%;
}

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

中

<强> HTML 

<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>

以下是example

答案 2 :(得分：1)

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

.ButtonContainer {
    display: block;
    width: 100%;
    overflow: auto;
    text-align: justify;
    line-height: 0;
    vertical-align: top;
    padding: 10px 0; /* adjust as needed */
}
.ButtonContainer button {
    margin: 0 10px; /* adjust as needed */
}
.ButtonContainer:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 100%;
    line-height: 1.5;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/2xXCD/

将.ButtonContainer元素转换为宽度为100％的块级元素，并设置overflow: auto（或clear: both）以清除浮动的内联表格。

使用text-align: justify获取均匀间隔的按钮。

但是，这只适用于容器中有两行以上的情况，因此请使用伪元素生成零高度的空100％宽内联块。

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

适用于大多数现代浏览器。

在Firefox中，它看起来像：

enter image description here

相关问题
最新问题