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
被推到下一行。
BUT!如果我將.inpoot
寬度設置爲calc(100% - 82px)
瞧!它的工作原理,但我對在上帝的美麗地球上的哪個地方感到震驚,是否有額外的寬度來自?
我的天啊!那是一個鬼鬼祟祟的小錯誤! :)謝謝你,親切的紳士。 –
@MohdAbdulMujib沒有錯誤,是一項功能。內聯元素之間的空間在物理上存在。所以它需要它的空間。這不是一個錯誤,它是互聯網廣泛引用的。搜索內聯塊和空格。祝你好運! –
你可以檢查這個答案是否正確。謝謝! :) –