1

我在这个链接中有我的 CSS 和 html 表单。http://jsfiddle.net/qLgCX/1/ 如何在以下输出的同一行中制作“更新”和“重置”按钮？我对仅包含 1 个提交按钮的其他几个 html 使用相同的 CSS。我担心更改 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;
}
4

4 回答 4

1

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

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

我可以花一周的时间优化其余部分（有更简单和更可扩展的方法来做你所做的事情），但这应该可以解决你的具体问题，而不会过多地干扰你现有的代码。

于 2013-05-21T18:30:28.703 回答
0

您可以尝试在 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
}
于 2013-05-21T18:30:05.543 回答
0

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-21T18:37:03.853 回答
0

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

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

并将其应用于您的按钮

看我的小提琴更新

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

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

于 2013-05-21T18:46:43.183 回答