Jak kontrolować wysokość granicy?

Question

Mam dwa div, jeden po lewej, a drugi po prawej. Teraz chcę podzielić te dwa elementy div na granice między nimi. Ale granica z pełną wysokością wygląda źle.

Chcę kontrolować wysokość granicy. Jak mogłem to zrobić?

Answer 1

Obramowanie będzie zawsze na całej długości pola zawierającego (wysokość elementu plus jego dopełnienie), nie można nim sterować za wyjątkiem regulacji wysokości elementu, do którego ma zastosowanie. Jeśli wszystko, co potrzebne jest pionowa przegroda, to mógł zastosowanie:

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

z CSS:

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

Demo at JS Fiddle wyregulować wysokość span.container dostosować granicę 'height'.

Lub użyć pseudo-elementy (::before lub ::after), biorąc pod uwagę następujące HTML:

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

Poniższy CSS dodaje pseudo-element przed każdym div elementu, który jest w sąsiedztwie rodzeństwo innego elementu 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

Chcę kontrolować wysokość granicy. Jak mogłem to zrobić?

Nie możesz. Granice CSS będą zawsze rozciągać się na całej wysokości/szerokości elementu.

Jednym ze sposobów obejścia tego problemu byłoby użycie pozycjonowania bezwzględnego (które może akceptować wartości procentowe) w celu umieszczenia elementu niosącego obramowanie wewnątrz jednego z dwóch elementów div. W tym celu musisz utworzyć element position: relative.

Answer 3

Można by stworzyć obraz niezależnie od wysokości chcesz, a następnie stanowisko, że z tłem CSS (pozycji a) nieruchomość jak:

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

Zamiast center top można również użyć piksel lub% jak 50% 100px.

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

Answer 4

nie jest zły .. ale spróbuj tego ... (powinien działa dla wszystkich, ale ist tylko -webkit włączone)

<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; 
"> 

// Zapraszam do edycji i dodać wszystkie inne przeglądarki ..

Answer 5

Tylko używając line-height

line-height: 10px; 

Answer 6

Po prostu szukałem tego ...Korzystając z odpowiedzi Davida, użyłem przęsła i nadałem mu trochę wypełnienia (wysokość nie zadziała + problem z górnym marginesem) ... Działa jak urok;

Zobacz 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; 
}