Comment contrôler la hauteur de la bordure?

Question

J'ai deux div, l'un à gauche et l'autre à droite. Maintenant, je veux diviser ce div deux avec une frontière entre eux. Mais la frontière avec toute la hauteur semble mauvaise.

Je veux contrôler la hauteur de la bordure. Comment pourrais-je faire ça?

Answer 1

Une bordure sera toujours sur toute la longueur de la boîte contenant (la hauteur de l'élément plus son rembourrage), elle ne peut pas être contrôlée, sauf pour ajuster la hauteur de l'élément auquel elle s'applique. Si tout ce que vous avez besoin est un diviseur vertical, vous pourrait utiliser:

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

Avec css:

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

Demo at JS Fiddle, régler la hauteur du span.container pour régler la frontière 'hauteur'.

Ou, pour utiliser des pseudo-éléments (::before ou ::after), avec le code HTML suivant:

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

Le CSS suivant ajoute un pseudo-élément avant tout élément div qui est le frère adjacent d'un autre élément 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

Je veux contrôler la hauteur de la bordure. Comment pourrais-je faire ça?

Vous ne pouvez pas. Les bordures CSS s'étendent toujours sur toute la hauteur/largeur de l'élément.

Une solution de contournement consisterait à utiliser le positionnement absolu (qui peut accepter des valeurs de pourcentage) pour placer l'élément porteur de bordure à l'intérieur de l'un des deux divs. Pour cela, vous devrez faire l'élément position: relative.

Answer 3

Vous pouvez créer une image de quelque hauteur que vous souhaitez, puis position avec la propriété arrière-plan CSS (-Position) comme:

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

Au lieu de center top vous pouvez également utiliser pixels ou% comme 50% 100px.

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

Answer 4

pas mal .. mais essayez celui-ci ... (devrait fonctionner pour tous, mais ist juste -webkit inclus)

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

// Ne hésitez pas à modifier et ajouter tout autre navigateur ..

Answer 5

Seulement en utilisant line-height

line-height: 10px; 

Answer 6

Je cherchais juste cela ...En utilisant la réponse de David, j'ai utilisé un span et je lui ai donné du rembourrage (la hauteur ne fonctionnera pas + problème de marge supérieure) ... Fonctionne comme un charme;

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