CSS排列按钮元素（HTML）

我在此链接中有我的CSS和html表单。 http://jsfiddle.net/qLgCX/1/如何在下面的输出中在同一行中创建“更新”和“重置”按钮？我使用相同的CSS为少数其他HTML只包含1个提交按钮。我担心改变CSS也会影响它们。 enter image description here CSS排列按钮元素（HTML）

enter image description here

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

来源

2013-05-21 Jill448

您应该将每一行放在段落中，而不是使用'
'。然后你可以添加一个'.contains-btn'类到最后一个，并且很容易''text-align：center'它的内容。并在其内部为每个按钮使用内联块。是否有一个或两个人不会改变他们的居中（如果这是所需的风格）编辑：我不会提供小提琴，因为该网站不会让我通过键盘或鼠标复制HTML代码... – FelipeAls

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只有一次，没有任何家长在选择：

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

来源

2013-05-21 18:37:03 Michael

哇，在类选择器中使用标签名称，声明两次相同的CSS，并使用'float'。我不在乎你没有选择我的答案，我担心这些低效和古老的编码习惯是作为答案提供的。我们不能只提供可行的答案，我们需要提供良好的答案，并教导人们如何以正确的方式进行编码。 – PlantTheIdea

@PlantTheIdea - Float是完成这件事的完全合理的方法。他还需要完成请求而不破坏其他只有一个按钮的表单，在这种情况下，您的解决方案会中断。在只有一个按钮而不是两个按钮的情况下，它不能使按钮居中。因此，具体的风格规则来解决他的具体问题。考虑到他有其他几种形式，只有一个按钮，这是唯一一个有两个按钮的形式，以上是一个完全合理的解决方案，如果他这样选择，他可以组合选择器。 – Michael

坦率地说，以上是比以下其他两个答案更好的解决方案。（不包括你的）。 – Michael

你可以试试显示：inline-block的在CSS的按钮。，如果你不打算做它，如果你想只在这个particu按钮的所有按钮（IE）; AR页面进行水平对齐，然后给一个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 
}

来源

2013-05-21 18:30:05 gaurav5430

，我发誓inline-block。我也必须修改margin-left，并删除您使用的<br>。以下是更新版本：

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

我可以花一个星期优化它的其余部分（也有更容易，更可扩展的方式做你做了什么），但是这应该解决您的具体问题，而不干涉太多在你现有的代码上。按你们的要求

来源

2013-05-21 18:30:28 PlantTheIdea

你可以尝试添加一个新的样式类：

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

（我也在提交后删除了换行符标签）

来源

2013-05-21 18:46:43

这不会把按钮放在同一行。 – Michael

对不起，我保存的“jsFiddle”没有将class =“mybutton”应用于重置。如果您将该代码添加到代码中，它应该可以工作。（http://jsfiddle.net/qLgCX/14/） –

CSS排列按钮元素（HTML）

回答

相关问题