將兩個按鈕水平對齊

如何將兩個按鈕水平對齊。將兩個按鈕水平對齊

<input type="submit" class="app-button" id="btnSearch" value="Aply Filters"><br> 
<input type="submit" class="app-button" id="btnClearSearch" value="Clear Filters">

下面是我使用的CSS。

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

Fiddle

來源

2016-02-23 Suraj

可能需要刪除
？ – sglazkov

試試這個;不需要

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

或者你可以嘗試，overFlow:hidden;

來源

2016-02-23 10:58:13

列表樣式。這是用於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; 
}

來源

2016-02-23 10:58:37 anoraq

一個簡單的方法： HTML：

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

CSS：

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

來源

2016-02-23 11:00:34 Panda

我認爲你需要像這樣

（我只刪除<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>

來源

2016-02-23 11:20:04

將兩個按鈕水平對齊

回答

相關問題