CSS Float添加到按鈕的高度

確定一些奇怪的事情發生在這裏，我正在使用一個類來共享樣式的2個按鈕。但是，當我將浮動權應用於其中一個按鈕時，它使得它在我的真實世界示例中使其大於26px和30px。CSS Float添加到按鈕的高度

在這http://jsfiddle.net/Mag2D/它只改變1px，但它仍然不同。

我有檢查，展示了26比30在這裏http://imgur.com/3WJdvcQ

這是正在使用的CSS ...

.orderButton { 
    position: relative; 
    -moz-borderradius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    background-color: #004282; 
    color: #fff; 
    padding: 5px 35px; 
    } 
    .right{float:right;}

任何想法，爲什麼這種情況正在發生的元素的屏幕抓取？

來源

2014-07-08 Travis

東西應該是壓倒它知道它是什麼更多的代碼將需要我的144pxX29px和144pxX30px –

我發現添加內襯元素通常是一個壞主意，因爲不一致（和不受歡迎的行爲）。如果你有一個你想分配填充/高度/寬度的內聯元素，可以簡化你自己並將其設置爲'display：inline-block'（這也解決了你的問題） – Adam

將它們兩個都浮起來，剩下。當它們都漂浮時，它們會變得完美。推理是... 不是塊級元素。 – VikingBlooded

答案是，當你漂浮一個內聯元素，它便成爲一個inline-block元素，這會改變填充方式/寬度/高度/邊距屬性被繪製。

每當你有一個內聯元素（例如，span,a等），您要添加填充，請確保將其設置爲display: inline-block。它將顯示更一致的跨瀏覽器，並且很可能會更有可能顯示您預期的方式。

來源

2014-07-08 19:05:19 Adam

非常感謝你解釋爲什麼，而不是僅僅告訴我把剩下的另一個浮起來，因爲那不是我想要的！ – Travis

解決方案＃1：

在CSS補充一點：

.left{float:left;}

並添加left類的a標籤

<a class="orderButton left">Place Order</a>

解決方案2：

在.orderButton，添加：

display:inline-block;

當你float一個元素，它會自動成爲一個塊框。那麼這裏可以轉移到左側或右側在當前行，但它也改變了margin，padding等

Demo #1 - 隨着float兩個a標籤

Demo #2 - 與inline-block;button類改爲

來源

2014-07-08 19:03:13 imbondbaby

這裏有2個問題：1）錨不是塊級元素。 2）當你浮動非塊級元素時，它們變成一個嵌入塊級元素，從而改變它們的模型。

如果通過向左按鈕添加一個「左」類並添加浮點數來設置它們，它們會變得完美。

HTML：

<a class="orderButton left">Place Order</a> 

<a class="orderButton right">Place Order</a>

CSS：

.orderButton { 
     position: relative; 
     -moz-borderradius: 4px; 
     -webkit-border-radius: 4px; 
     border-radius: 4px; 
     background-color: #004282; 
     color: #fff; 
     padding: 5px 35px; 
} 
.right{float:right;} 
.left{float:left;}

來源

2014-07-08 19:03:20 VikingBlooded

可能是一個好主意來解釋你的答案，而不是期待我們做一個心理差異。 – j08691

是的exmplanation會有幫助，因爲我不希望其他按鈕被正確地浮動。這只是我的小提琴，因爲它不可能顯示我的整個頁面。 – Travis

CSS Float添加到按鈕的高度

回答

相關問題