Làm thế nào để kiểm soát chiều cao biên giới?

Question

Tôi có hai div, một ở bên trái và cái còn lại nằm ở bên phải. Bây giờ tôi muốn chia hai div này với một đường viền giữa chúng. Nhưng biên giới với chiều cao đầy đủ trông xấu.

Tôi muốn kiểm soát chiều cao của đường viền. Làm thế nào tôi có thể làm điều này?

Answer 1

Đường viền sẽ luôn ở chiều dài đầy đủ của hộp chứa (chiều cao của phần tử cộng với phần đệm), không thể kiểm soát ngoại trừ điều chỉnh chiều cao của phần tử áp dụng. Nếu tất cả bạn cần là một chia theo chiều dọc, bạn có thể sử dụng:

<div id="left"> 
    content 
</div> 
<span class="divider"></span> 
<div id="right"> 
    content 
</div> 

Với css:

span { 
display: inline-block; 
width: 0; 
height: 1em; 
border-left: 1px solid #ccc; 
border-right: 1px solid #ccc; 
} 

Demo at JS Fiddle, điều chỉnh chiều cao của span.container để điều chỉnh biên giới 'chiều cao'.

Hoặc, sử dụng giả yếu tố (::before hoặc ::after), được đưa ra HTML sau:

<div id="left">content</div> 
<div id="right">content</div> 

CSS sau đây thêm một phần tử giả trước khi bất kỳ yếu tố div đó là anh chị em liền kề của nguyên tố khác div:

div { 
    display: inline-block; 
    position: relative; 
} 

div + div { 
    padding-left: 0.3em; 
} 

div + div::before { 
    content: ''; 
    border-left: 2px solid #000; 
    position: absolute; 
    height: 50%; 
    left: 0; 
    top: 25%; 
} 

JS Fiddle demo.

Answer 2

Tôi muốn kiểm soát chiều cao của đường viền. Làm thế nào tôi có thể làm điều này?

Bạn không thể. Đường viền CSS sẽ luôn luôn trải rộng trên toàn bộ chiều cao/chiều rộng của phần tử.

Một ý tưởng giải pháp khác là sử dụng định vị tuyệt đối (có thể chấp nhận giá trị phần trăm) để đặt phần tử mang theo đường viền bên trong một trong hai div. Để làm được điều đó, bạn sẽ phải tạo thành phần position: relative.

Answer 3

Bạn có thể tạo ra một hình ảnh của bất cứ chiều cao bạn muốn, và sau đó vị trí đó với nền CSS (Chức vụ) bất động sản như:

#somid { background: url(path/to/img.png) no-repeat center top; 

Thay vì center top bạn cũng có thể sử dụng pixel hoặc% như 50% 100px.

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position

Answer 4

không xấu .. nhưng hãy thử một này ... (nên làm việc cho tất cả nhưng ist chỉ -webkit bao gồm)

<br> 
<input type="text" style=" 
    background: transparent; 
border-bottom: 1px solid #B5D5FF; 
border-left: 1px solid; 
border-right: 1px solid; 
border-left-color: #B5D5FF; 
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat; 
"> 

// Hãy để chỉnh sửa và thêm tất cả các trình duyệt khác ..

Answer 5

Chỉ sử dụng line-height

line-height: 10px; 

Answer 6

Tôi chỉ đang tìm kiếm ...Bằng cách sử dụng câu trả lời của David, tôi đã sử dụng một khoảng và cho nó một số đệm (chiều cao sẽ không hoạt động + vấn đề lề trên) ... Hoạt động như một sự quyến rũ;

Xem fiddle

<ul> 
    <li><a href="index.php">Home</a></li><span class="divider"></span> 
    <li><a href="about.php">About Us</a></li><span class="divider"></span> 
    <li><a href="#">Events</a></li><span class="divider"></span> 
    <li><a href="#">Forum</a></li><span class="divider"></span> 
    <li><a href="#">Contact</a></li> 
</ul> 

.divider { 
    border-left: 1px solid #8e1537; 
    padding: 29px 0 24px 0; 
}