web-dev-qa-db-fra.com

La longueur de la bordure est inférieure à la largeur div?

J'ai le code suivant

div {
   width:200px;
   border-bottom:1px solid Magenta;
   height:50px;   
}

DÉMO

La largeur de la div est de 200 pixels, donc border-bottom est également de 200 pixels, mais que dois-je faire si je ne veux que 100 pixels de la frontière sans changer la largeur de la division?

htmlcss
101
Ali Nouman

Vous pouvez utiliser des pseudoéléments. Par exemple.

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid Magenta;
}
<div>Item 1</div>
<div>Item 2</div>

Pas besoin d'utiliser de balisage supplémentaire à des fins de présentation. : after est également supporté par IE8.

modifier:

si vous avez besoin d’une bordure alignée à droite, changez simplement left: 0 avec right: 0

si vous avez besoin d'une bordure centrée, il vous suffit de définir left: 50px;

193
fcalderan

Une autre façon de procéder (dans les navigateurs modernes) consiste à utiliser une boîte-ombre à propagation négative. Découvrez ce violon mis à jour: http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px Magenta;

Je pense que le moyen le plus sûr et le plus compatible est la réponse acceptée ci-dessus, cependant. Je pensais juste partager une autre technique.

36
m1.

Vous pouvez utiliser un dégradé linéaire:

div {
    width:100px;
    height:50px;
    display:block;
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
        background-position: bottom;
        background-size: 100% 25px;
        background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}
<div></div>
9
lsblsb

J'ai ajouté une ligne sous la balise h3 comme celle-ci

<h3 class="home_title">Your title here</h3> 
.home_title{
    display:block;
}
.home_title:after {
    display:block;
    clear:both;
    content : "";
    position: relative;
    left    : 0;
    bottom  : 0;
    max-width:250px;
    height  : 1px;
    width   : 50%;  /* or 100px */
    border-bottom:1px solid #e2000f;
    margin:0 auto;
    padding:4px 0px;
}
5
DevelopmentBucket

Vous ne pouvez pas avoir une bordure de taille différente de celle de la div elle-même.

la solution consisterait simplement à ajouter une autre division sous le dessous, centrée ou en position absolue, avec la bordure désirée de 1 pixel et seulement 1 pixel de hauteur.

http://jsfiddle.net/WuZat/3/

J'ai laissé la bordure d'origine dans afin que vous puissiez voir la largeur, et avoir deux exemples - l'un avec 100 largeur et l'autre avec 100 largeur centrée. Supprimez celui que vous ne souhaitez pas utiliser.

3
Authman Apatira

En retard à la fête mais pour tous ceux qui veulent faire 2 bordures (en bas et juste dans mon cas), vous pouvez utiliser la technique dans la réponse acceptée et ajouter un: après l'élément pseudo-élément pour la deuxième ligne, puis modifiez les propriétés comme donc: http://jsfiddle.net/oeaL9fsm/

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid Magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid Magenta;
}
2
JaySwaan
            div{
                font-size: 25px;
                line-height: 27px;
                display:inline-block;
                width:200px;
                text-align:center;
            }

            div::after {
                background: #f1991b none repeat scroll 0 0;
                content: "";
                display: block;
                height: 3px;
                margin-top: 15px;
                width: 100px;
                margin:auto;
            }
1
Friend

J'ai le cas d'avoir un bord inférieur entre les images dans le conteneur div et le meilleur code de ligne était - border-bottom-style: inset;

1
Ganni Georgiev

CA aidera:

http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%">

Cela crée une ligne horizontale avec une largeur de 50%, vous devrez créer/modifier la classe si vous souhaitez modifier le style.

1
DanielSD

La bordure est donnée à l'élément HTML complet. Si vous voulez une demi-bordure inférieure, vous pouvez l'envelopper avec un autre bloc identifiable, tel que span.

Code HTML:

<div> <span>content here </span></div>

CSS comme ci-dessous:

 div{
    width:200px;
    height:50px;   
    }
 span{
        width:100px;
        border-bottom:1px solid Magenta;   
    }
1
Umesh Patil

Je viens d'accomplir le contraire en utilisant :after et ::after parce que je devais élargir exactement ma bordure inférieure 1.3rem:

Mon élément s'est super déformé lorsque j'ai utilisé :before et :after en même temps car les éléments sont alignés horizontalement avec display: flex, flex-direction: row et align-items: center.

Vous pouvez utiliser ceci pour créer quelque chose de plus large ou plus étroit, ou probablement n'importe quel mods de dimension mathématique:

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

Désolé, il s'agit de SCSS, il suffit de multiplier les nombres par 10 et de modifier les variables avec des valeurs normales.

1
agm1984