将两个按钮彼此水平对齐

时间:2016-02-23 10:53:36

标签: html css

如何将两个按钮彼此水平对齐。

Button

以下是我正在使用的CSS。

private void textBox1_DragEnter(object sender, DragEventArgs e)
{
    if ((e.AllowedEffect & DragDropEffects.Link) != 0
      && e.Data.GetDataPresent(typeof(Button)))
        e.Effect = DragDropEffects.Link;
}

private void textBox1_DragDrop(object sender, DragEventArgs e)
{
    Button btn = e.Data.GetData(typeof(Button)) as Button;
    btn.Parent = textBox1;
    btn.Location = new Point(textBox2.Width - btn.Width - 2, -2);
}

private void button1_Click(object sender, EventArgs e)
{
    textBox1.Text = "The Button is still working!";
}

// we use the MouseMove with a check for the left button
private void button1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == System.Windows.Forms.MouseButtons.Left)
       DoDragDrop((sender as Button), DragDropEffects.Link); 
}

Fiddle

4 个答案:

答案 0 :(得分:1)

试试这个;

 .app-button{
     list-style: none;
     text-align: center;
     background-color: #01AAAD;
     width: 150px;margin:0;
     line-height: 60px;
     float: left;
   }

或者您可以尝试overFlow:hidden;

答案 1 :(得分:1)

我认为你需要这样的东西

(我只删除<br>,并将其包装成.row)。

.app-button{
    background-color: #01AAAD;
    width: 150px;
    margin:0 20px;
    display:inline-block;
    line-height: 60px;
}
.row{
  text-align:center;
  /*the same margin which is every button have, it is for small screen, and if you have many buttons.*/
  margin-left:-20px;
  marin-right:-20px;
}
<div class="row">
   <input type="submit" class="app-button" id="btnSearch" value="Aply Filters">
   <input type="submit" class="app-button" id="btnClearSearch" value="Clear Filters">
 </div>

答案 2 :(得分:0)

不需要列表样式。这是用于ul和ol元素的东西。你有两个输入,所以一种方式是:

.app-button {
    display:inline-block;
    text-align: center;
    background-color: #01AAAD;
    width: 150px;margin:0;
    line-height: 60px;
}

并且可能之间有一些空间?

 .app-button:first-of-type {
    margin-right:15px;
 }

答案 3 :(得分:0)

一种简单的方法: HTML:

<div>
<input type="button" value="button1" /><input type="button" value="button2" />
</div>

CSS:

div { padding: 10px; border: 1px solid black; }
input { margin: 0; }