無法對齊具有+＆ - 號的按鈕

我有兩個具有+和 - 的按鈕。我無法同時獲得兩個寬度相同的按鈕。如果我使用CSS寬度屬性，標誌不會集中對齊。無法對齊具有+＆ - 號的按鈕

<span class="button-inner"> 
    <input type="submit" value="-" rel="rc1"> 
</span> 
<br> 
<span class="button-inner"> 
    <input type="submit" value="+" rel="rc2"> 
</span>

我的CSS：

input[rel^="rc"] { 
    width: 5%; 
    margin-left: auto; 
    margin-right: auto; 
}

- 和+體徵不集中或不具備兩邊相等填充

來源

2017-10-12 user1692342

看到它請詳細說明他們如何看 '關'，我看到這個代碼如預期運行在撥弄。 –

更新爲圖像 – user1692342

基本上+＆ - 符號不佔用相同的列寬 – user1692342

看起來你是在正確的去通過使用寬度屬性，但正如你所說，+和 - 字符不在中心對齊。您可以添加屬性

text-align:center;

並且幾乎可以修復它...它仍然看起來像+和 - 在右邊。這是因爲寬度不夠寬。在這個jsfiddle, 8％的寬度似乎有伎倆。

可能的解決辦法：

input[rel^="rc"] { 
width: 8%; 
margin-left: auto; 
margin-right: auto; 
text-align:center;

}

這裏https://jsfiddle.net/sq8aba3v/

來源

2017-10-12 00:53:47

有5％在Chrome上看起來很好，但在Firefox上沒有。我不是在尋找一個寬的按鈕。我正在尋找儘可能小的按鈕。我知道增加寬度會使它工作 – user1692342

雖然這應該有一個具有可靠的px值的'min-width'，改變相對寬度並不能解決這個問題 –

無法對齊具有+＆ - 號的按鈕

回答

相關問題