CSS排列按钮元素（HTML）

Question

我在这个链接中有我的CSS和html表单。 http://jsfiddle.net/qLgCX/1/如何在下面的输出中的同一行中创建“更新”和“重置”按钮？ 我使用相同的CSS几个其他html只包含1个提交按钮。我担心改变CSS也会对它们产生影响。

#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

Answer 1

就个人而言，我发誓inline-block。我还必须修改margin-left，然后删除您使用的<br>。这是更新版本：

http://jsfiddle.net/qLgCX/3/

我可以花一周时间对其余部分进行优化（有更简单，更易于扩展的方法来完成您的工作），但这应该可以解决您的具体问题，而不会干扰您现有的代码。

Answer 2

你可以尝试在按钮的css中显示：inline-block。 如果您不打算在所有按钮上执行此操作（即），如果您只想在此特定按钮上进行按钮;将页面水平对齐，则为包含按钮的div提供id，然后将css定义为

#divid #stylizedbtn{
display:inline-block;
}

抱歉，我起初并没有看到小提琴。

请试试这个： 1.在第一个按钮后删除
标签

<button style="display:inline-block" type="submit">Update</button>
<button style="display:inline-block" type="reset">Reset</button><br><br>

更改你的css

#stylized button{
margin-left:50px; //some lesser value than 150px
}

Answer 3

http://jsfiddle.net/qLgCX/10/

此解决方案不会影响您所要求的其他表单。它确实需要对HTML进行一些修改，即向按钮添加一个类。

我修改的HTML：

<button type="submit" class="custom-submit" >Update</button>
<button type="reset" class="custom-reset">Reset</button>

我添加的CSS：

#stylized button.custom-submit, #stylized button.custom-reset {
    float: left;
    clear: none;
    margin-left: 50px;
}

或者如果你想更有效率地做，你只需要一个班级：

<button type="submit" class="UpdateReset" >Update</button>
<button type="reset" class="UpdateReset">Reset</button>

你只能在CSS中应用一次CSS，而选择器中没有父母：

.UpdateReset {
    float: left;
    clear: none;
    margin-left: 50px;
}

Answer 4

您可以尝试添加新的样式类：

.mybutton { margin-left:20px !important;}

并将其应用于按钮

see my Fiddle update

<button type="submit" class="mybutton">Update</button> 
<button type="reset" class="mybutton">Reset</button><br><br>

（提交后我也删除了换行标记）