2016-11-17 467 views
3

我使用calc()來測量輸入可用寬度後減去兄弟元素的寬度。CSS3 calc()函數無法正常工作

<div class="containero"> 
    <button class="noey">No</button> 
    <input class="inpoot" /> 
    <button class="yeso">Yes</button> 
</div> 

而且我有以下的CSS。

.containero { 
    width: 100%; 
    background-color: yellow; 
    display: inline-block; 
    box-sizing:border-box; 
} 

.noey, .yeso { 
    border: 1px solid red; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    vertical-align: middle; 
    display:inline-block; 
    color: red; 
    padding:0px; 
    box-sizing:border-box; 

} 


.inpoot { 
    height: 31px; 
    margin: 0 5px; 
    display:inline-block; 
    width: calc(100% - 70px); 
    box-sizing:border-box; 
} 

現在按照我的計算,該元素.inpoot應該適合在美觀舒適的,如果我設置它的寬度calc(100% - 70px);考慮到30px的widht兩個兄弟姐妹,然後它的10px自己的利潤率。但令我非常沮喪的是,生活並不容易它沒有按預期工作。最後一個兄弟,.yeso被推到下一行。

DEMO 1

BUT!如果我將.inpoot寬度設置爲calc(100% - 82px)瞧!它的工作原理,但我對在上帝的美麗地球上的哪個地方感到震驚,是否有額外的寬度來自?

DEMO 2

回答

2

你需要知道的元素inlineinline-block之間的空間問題。所以如果你在兩個內聯元素之間有一個空白空間,那麼它在總計算中就要考慮到了。爲了避免這種情況,有很多技巧,但最簡單的是以下幾點:

.containero { 
     font-size: 0; 
} 

將此屬性添加到您的CSS並且它可行。工作示例:

.containero { 
 
    font-size: 0; 
 
    width: 100%; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
    box-sizing:border-box; 
 
} 
 

 
.noey, .yeso { 
 
    border: 1px solid red; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display:inline-block; 
 
    color: red; 
 
    padding:0px; 
 
    box-sizing:border-box; 
 

 
} 
 

 

 
.inpoot { 
 
    height: 31px; 
 
    margin: 0 5px; 
 
    display:inline-block; 
 
    width: calc(100% - 70px); 
 
    box-sizing:border-box; 
 
}
<div class="containero"> 
 
    <button class="noey">No</button> 
 
    <input class="inpoot" /> 
 
    <button class="yeso">Yes</button> 
 
</div>

並請,因爲我們需要一個帳戶修改代碼,並分享它不使用codepen.io。這是更好的jsfiddle.net和最好的選擇是集成stacksnippets(像我的)

+0

我的天啊!那是一個鬼鬼祟祟的小錯誤! :)謝謝你,親切的紳士。 –

+0

@MohdAbdulMujib沒有錯誤,是一項功能。內聯元素之間的空間在物理上存在。所以它需要它的空間。這不是一個錯誤,它是互聯網廣泛引用的。搜索內聯塊和空格。祝你好運! –

+0

你可以檢查這個答案是否正確。謝謝! :) –