La ligne droite après le texte

J'aimerais avoir une ligne qui commence juste après mon texte sur la même ligne, j'ai essayé avec le code simple suivant

<html><body>My Text<hr/></body></html>

Il semble que <hr> n'est pas une option, car il est toujours sur une nouvelle ligne et je voudrais que la ligne commence à la droite de mon texte.

Toute aide ?

Quel est le but de cette ligne? La raison pour laquelle les RH s'affiche ci-dessous(par défaut), c'est l'ensemble de point: cette balise est censé indiquer un diviseur. Si la ligne que vous essayez d'atteindre est juste décoratif, il y a d'autres moyens plus appropriés à cette approche. (Je prends un coup au-dessous.) Il y a aussi un peu de marge de manœuvre dans cette question d'interprétation; vous pouvez ajouter une image de exactement ce que vous voulez dire par "sur la même ligne."

InformationsquelleAutor Nikko | 2011-02-01

css html

16

La <hr> a défaut de style qui le met sur une nouvelle ligne. Cependant que par défaut le style peut être contournée, de la même manière que pour tout autre élément. <hr> est rien de plus qu'un vide <div> avec une bordure par défaut de réglage.

Pour démontrer cela, essayez ce qui suit:
```
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
```
Il y a un certain nombre de façons de remplacer le style de <hr> pour réaliser votre but.

Vous pouvez essayer d'utiliser display:inline-block; avec un width paramètre, comme je l'ai ci-dessus. L'inconvénient de cette approche est qu'elle nécessite de connaître la largeur que vous voulez, mais il ya des façons de contourner cette - width:100%;, et l'ensemble de la ligne dans un récipient <div> qui a overflow:hidden; pourrait faire l'affaire, par exemple:
```
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
```
Une autre option serait d'utiliser float:left;. Vous avez besoin de l'appliquer à tous les éléments de la ligne, et je n'aime pas cette option car je trouve que float a tendance à causer plus de problèmes qu'elle n'en résout. Mais essayez-le et voyez si cela fonctionne pour vous.

Il y a diverses autres combinaisons de styles, vous pouvez essayer de lui donner un aller et voir ce qui fonctionne.
- Cela fonctionne bien. Devrait être accepté comme réponse.
InformationsquelleAutor Spudley

À l'aide de FlexBox Propriété de ce qui peut être réalisé facilement.

CSS:

.mytextdiv{
  display:flex;
  flex-direction:row;
   align-items: center;
}
.mytexttitle{
  flex-grow:0;
}

.divider{
  flex-grow:1;
  height: 1px;
  background-color: #9f9f9f;
}

HTML:

<div class="mytextdiv">
  <div class="mytexttitle">
    My Text
  </div>
  <div class="divider"></div>
</div>

InformationsquelleAutor Deepak

1

Essayez ceci:

<html><body>My Text<hr style="float: right; width: 80%"/></body></html>

Les CSS float: right va le garder sur la même ligne que le texte.
Vous aurez besoin d'ajuster la width si vous voulez remplir le reste de la ligne.

InformationsquelleAutor Merijn
1

À l'aide de inline ou float, autant que j'ai testé, ça ne fonctionne pas correctement, même si cela a été ma première pensée. En regardant de plus j'ai utilisé le code css suivant
```
hr {
    bottom: 17px;
    position: relative;
    z-index: 1;
}

div {
    background:white;
    position: relative;
    width: 100px;
    z-index: 10;
}
```
html
```
<div>My Text</div><hr/>
```
Démo http://jsfiddle.net/mFEWk/

Ce que j'ai fait est d'ajouter la position relative de ces deux éléments (pour me donner l'avantage de z-index utilisation). Aussi à partir du moment où j'ai eu position:relative pour hr je l'ai déplacé à partir de la bottom:17px. Ce déplacer au-dessus de la div qui contient le texte. L'application de z-index valeurs et l'ajout de background:white pour la div met le texte au-dessus de la ligne. Bien sûr, n'oubliez pas d'utiliser un width pour le texte, sinon prendra toute la largeur de l'élément parent.

InformationsquelleAutor Sotiris

HTML:

<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">

Exactement ce que vous voulez.

InformationsquelleAutor Даниил Пронин

1

De l'essayer. Il fonctionne
```
<p style="float:left;">
    Hello Text
    <hr style="float:left; width: 80%"/>
</p>
```
Vous pouvez également utiliser cette option pour tracer une ligne entre les textes comme

Bonjour -------------------------- Bonjour

InformationsquelleAutor Mukesh Rai

hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}

Ce genre de sens?

<p>My text</p>
<hr />

InformationsquelleAutor benhowdle89

Ici est une approche possible, mais il y a des hypothèses/exigences. Votre question doit être modifié pour donner des renseignements plus précis sur ce que vous êtes en train de construire.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Blah</title>
    <style type="text/css">
        body {
            background-color : white;
            font-family : Arial;
            font-size : 16px;
        }
        .wrap {
            background: transparent url(px.png) repeat-x 0px 85%;
            /* Different fonts or text sizes may require tweaking of that offset.
               px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
        }
        .inner {
            background-color : white;
            /* Should match the background of whatever it's sitting over. 
               Obviously this requires a solid background. */
        }
    </style>
</head>
<body>
    <div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>

InformationsquelleAutor Su'

0

L'OP jamais précisé à la fin de la ligne, mais je voulais partager ce que j'ai fait lorsque j'ai été faire un modèle html où l'utilisateur a besoin d'une ligne à écrire sur après que le document a été imprimé.

Parce que les rh, les valeurs par défaut à sa propre ligne et la valeur par défaut étant centré dans la ligne, j'ai décidé d'utiliser un div et le style à la place.

HTML
```
This is my text.<div class='fillLine'></div>
```
CSS
```
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
```
JSFiddle Démo

Style de la Div pour la Ligne Après le Texte

Espère que ça aide quelqu'un qui avait le même objectif que moi.

InformationsquelleAutor Ryan Gibbs
0

J'ai utilisé la technique suivante:

Donner le conteneur div une image de fond d'écran avec une ligne horizontale.
Mettre un élément (comme <h3>) dans le conteneur div (je l'ai sur la droite afin float: right; )

Utiliser le code css suivant:
```
.line-container {
  width: 550px;
  height: 40px; 
  margin-top: 10px;
  background-image: url("/images/horizontal_line.png");
}

.line-container h3 {
  padding-left: 10px; 
  float: right;
  background-color: white;
}
```
InformationsquelleAutor Stoep

Below code did the job for me

HTML File:
----------
<p class="section-header">Details</p><hr>

CSS File:
----------
.section-header{
    float: left; 
    font-weight: bold
}

hr{
    float: left;
    width: 80%;
}

INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">

InformationsquelleAutor Utkarsh Bhushan

Vous devez vous connecter pour publier un commentaire.