Question

我试图将按钮与输入框对齐而不添加div标签。我能用CSS做到吗？我在input.submit上尝试了margin-top和padding-top，但它不起作用？

以下是CSS：

#outer {
    width: 50%; 
    display: table; /*padding: 1em 0 0; */
    background: green;
}

#inner {
     display: table-cell; 
     /*width: 100%;*/ 
    background: red;
}

input {
    width: 100%; 
    /*padding: .5em 1em;*/
}

以下是HTML：

<div id='outer'>
    <div id='inner'>
        <label>Eat</label>
        <input type='textbox'></input>
    </div>
    <input class='button_submit' type='submit'></input>
</div>

Answer 1

将您的css中的input更改为input[type=submit]

Answer 2

将您的display: table和display: table-cell声明移至某个级别： DEMO

#inner {
    display: table;
}

input, label {
    display: table-cell;
}

.button_submit {
    width: auto;
}

Answer 3

您可以使用display:table属性对齐div。在您的代码中，您没有为输入按钮字段应用任何stlye。

以下是演示http://jsfiddle.net/kheema/mXbfe/24/

看看这个CSS。

#outer {
    width: 50%; 
    display: table; /*padding: 1em 0 0; */
    background: green;
}
#inner {
     display: table-cell; 
     /*width: 100%;*/ 
    background: red;
}
input[type="submit"]{display: table-cell;}

如何在不添加任何div的情况下对齐表格显示中的按钮

3 个答案: