xem xét sau đây:CSS: Đặt đường viền một nửa chiều rộng
<div class="box">
...
</div>
.box{
width:500px;
border-bottom: 1px solid #ccc;
}
Nó sẽ thiết lập các biên giới dưới cùng của toàn bộ chiều rộng của hộp (500px). Nhưng thay vì thiết lập đáy biên giới để toàn bộ chiều rộng, tôi muốn thiết 300px, ở giữa đáy hộp, làm thế nào tôi nên làm điều đó ..
Bạn có thể ném <hr> ở cuối hộp của mình không?
<div class="box">
...
<hr>
</div>
.box{
width:500px;
}
.box hr{
width: 300px;
border-bottom: 1px solid #ccc;
}
Bạn có thể làm điều này:
.box {
position: relative;
width: 500px;
}
.border {
position: aboslute;
background: #ccc;
left: 100px;
bottom: 0;
width: 300px;
height: 1px;
}<div class="box">
<div class="border">
</div>
</div>Nhưng có những khả năng vô hạn. Một số có ngữ nghĩa chính xác hơn những người khác; giải pháp này chỉ đơn giản là sửa chữa nhanh chóng.
Bạn có thể sử dụng một background-image:
.box{
width:500px;
border-bottom: 1px solid #ccc;
background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
background-position: bottom left;
background-repeat:no-repeat;
}
Có! Và bạn cũng có thể sử dụng CSS Gradients để tạo hình ảnh trong CSS nếu đó là một màu đơn giản hoặc màu: 'background-image: linear-gradient (đen, đen); background-size: 50% 1px; background-position: 50% 100% '. –
tôi sẽ đề nghị làm một cái gì đó như thế này, hoạt động tốt trong Firefox
<style type="text/css">
.box{
width: 500px;
height: 20px;
}
.boxHalfWidth{
width: 250px;
height: 1px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box">
some data
<div class="boxHalfWidth"></div>
</div>
</body>
Sử dụng không cần thiết các phần tử HTML phụ. –
Bạn có thể sử dụng :: sau hoặc :: trước bộ chọn giả. Giống như:
<div> something here </div>
CSS:
div {
width: 500px;
height: 100px;
position: relative;
padding-top: 20px;
margin-top: 50px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50%;
left: 25%;
border-top: 1px solid red;
}
Dưới đây là jsfiddle
bạn có thể đặt một trung tâm '
' ở dưới cùng của hộp của bạn? Sau đó, bạn có thể tạo kiểu cho nó chính xác như cách bạn cần. –
Thực tế padding là để kiểm soát điều đó. – noob
@micha cũng sẽ dán nội dung trong 'hộp' –