web-dev-qa-db-fra.com

Comment contrôler la hauteur de la bordure?

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

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

htmlcsslayout
21
Jichao

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 dont vous avez besoin est un séparateur vertical, vous pourriez 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;
}

Démo sur JS Fiddle , ajustez la hauteur du span.container pour régler la hauteur de la bordure.

Ou, pour utiliser des pseudo-éléments (::before ou ::after), étant donné 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 .

37
David Thomas

Utiliser uniquement line-height

line-height: 10px;

enter image description here

11
Đinh Tiến Vũ

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

Voir violon

<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;
}
1
Abdul Sadik Yalcin

pas mal .. mais essayez celui-ci ... (devrait fonctionner pour tous, mais c'est 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;
">

// N'hésitez pas à modifier et ajouter tous les autres navigateurs ..

1
Alexander Sidikov Pfeif

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

Tu ne peux 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 portant la bordure à l'intérieur de l'un des deux divs. Pour cela, vous devez faire l'élément position: relative.

0
Pekka 웃

Vous pouvez créer une image de la hauteur souhaitée, puis la positionner avec la propriété CSS background (-position) comme:

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

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

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

0
DanMan