首页 文章

中心对齐按钮与div内的文本框

提问于
浏览
0

我创建了一个带有文本框输入和下方按钮的表单 . 表单放在div中 . 两个输入具有相同的宽度(200px),div内容使用“text-align”属性与中心对齐 .

但是,按钮似乎与文本框不对齐,而是与右侧相对 . 我也在表单上尝试过“text-align”,但这也行不通 .

这是小提琴:http://jsfiddle.net/leandri/LVsw8/1/

这是HTML:

<div id="div">
    <form id="form">
        <input id="text" type="textbox"/>
        
<input id="button" type="button" value="submit"/> </form> </div>

这是CSS:

#div {
    text-align: center;
}
#text {
    width: 200px;
}
#button {
    width: 200px;
}

1 回答

  • 3

    内联元素对代码中的空白区域很敏感 . 取下它们并正确对齐 .

    <div id="div">
        <form id="form">
            <input id="text" type="textbox" />
    <input id="button" type="button" value="submit" /> </form> </div>

    jsFiddle example

相关问题