CSS中的下框線設置是依靠border-bottom屬性來實現的。下面是一些常見的下框線長度設置:
/* 默認值為0,不顯示下框線 */ border-bottom: 0; /* 單位可以是像素(px)、百分比(%)、ems(em)等 */ border-bottom: 1px; border-bottom: 1em; border-bottom: 50%; /* 可以設置樣式、顏色等等 */ border-bottom: solid 1px red;
在一些情況下,我們可能需要為下框線設置一個固定長度,比如一個地址欄,希望下框線的長度和輸入框的長度相同。這時候,我們可以使用一些技巧來實現。
/* 顯示下框線,長度為150px,如果寬度超過150則隱藏超出的部分 */ border-bottom: solid 1px black; width: 150px; overflow: hidden; /* 顯示下框線,長度為50%,并且居中顯示 */ border-bottom: solid 1px black; width: 50%; margin: 0 auto;
需要注意的是,如果設置了box-sizing為border-box,則border-bottom的長度也包含在width的計算范圍內。
/* 顯示下框線,長度為100px,寬度包括border和padding */ border-bottom: solid 1px black; width: 100px; box-sizing: border-box;
下一篇css不好查找