CSS: Définir la frontière de la moitié de la largeur

Considérez ce qui suit:

<div class="box">
...
</div>

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

Il va définir la bordure inférieure de la totalité de la largeur de la boîte (500px).
Mais au lieu de la définition de la frontière bas de toute la largeur, j'aimerais définir 300px, dans le milieu du fond de la boîte, comment dois-je faire..

pouvez-vous mettre un centré <hr> au fond de votre boîte? Ensuite, vous pouvez définir le style, c'est exactement la façon dont vous en avez besoin.
En fait le rembourrage est pour le contrôle.
ce sera aussi dpa le contenu à l'intérieur de la box
ouais, bien sûr

OriginalL'auteur user1117313 | 2012-01-10

  1. 8

    Pouvez-vous jeter un <hr> au fond de votre boîte?

    <div class="box">
    ...
    <hr>
</div>

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

    http://jsfiddle.net/MuAKF/

    OriginalL'auteur Chase Florell

  2. 18

    Vous pouvez Utiliser ::après ou ::avant de pseudo-sélecteurs.
    Comme: 

    <div> something here </div>

    CSS:

    div {
    width: 500px;
    height: 100px;
    position: relative;
    padding-top: 20px;
    margin-top: 50px;
}

div::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    left: 25%;
    border-top: 1px solid red;
}

    Ici est la jsfiddle

    C'est la réponse
    Vous pouvez utiliser la même solution pour une bordure verticale.
    voici un problème, puis-je utiliser contenu l'article en aucune façon à tracer une frontière? sans l'aide de border de la propriété? je me demandais

    OriginalL'auteur Melniciuc Costea

  3. 2

    Vous pouvez utiliser un background-image:

    .box{
    width:500px;
    border-bottom: 1px solid #ccc;
    background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
    background-position: bottom left;
    background-repeat:no-repeat;
}
    Oui! Et vous pouvez également utiliser des Gradients CSS pour générer l'image en CSS si c'est un simple dégradé ou couleur unie: background-image: linear-gradient(black, black); background-size: 50% 1px; background-position: 50% 100%.

    OriginalL'auteur Kris Hollenbeck

  4. 0

    Je suggère de faire quelque chose comme cela, fonctionne bien dans Firefox 

    <style type="text/css">

.box{

    width: 500px;

    height: 20px;

}

.boxHalfWidth{

    width: 250px;

    height: 1px;

    border-bottom: 1px solid #CCC;

}

</style>

</head>

<body>

<div class="box">

some data

<div class="boxHalfWidth"></div>

</div>

</body>
    Inutile supplémentaire des éléments HTML.

    OriginalL'auteur redDevil