1
votes

Ligne verticale avec du texte au milieu en utilisant html et css

Je veux créer comme ça

Je peux faire comme ci-dessous

Comment supprimer cette ligne excédentaire du début

Je ne parviens pas à publier du code css et html, ce qui donne des erreurs, donc je poste des captures d'écran du code

entrez la description de l'image ici

html css

3 commentaires

pourquoi est-ce que vous ne pouvez pas publier votre code?

Ceci est ma première question dans stackoverflow et je ne le sais pas en jetant des erreurs en disant laisser 4 espaces

Bienvenue à SO au fait. Lorsque vous incluez le code, vous devez le formater en cliquant sur {} pour le faire ressembler à un bloc de code. Essayez de cette façon, s'il vous plaît.

3 Réponses :

0
votes

 <style>
    li{
        list-style: none;
       width: 50px;
       text-align: center;
    }
    li::before{
        content: ' ';
        position: relative;
        bottom: 2px;
        display: block;
        width: 5px;
        height: 50px;
        background-color: red;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <ul>
        <li>2011</li>
        <li>2012</li>
        <li>2013</li>
        <li>2014</li>
    </ul>
</body>

0 commentaires

1
votes

J'ai fait ceci pour vous sur JSFiddle, j'espère que c'est ce que vous recherchez.

<div class="timeline">
	<div class="word">2016</div>
	<div class="word">2014</div>
	<div class="word">2013</div>
	<div class="word">2012</div>
	<div class="word">2010</div>
</div>

.timeline {
	position: relative;
	width: 30px;
	margin: 0 auto;
	overflow: hidden;
}
.timeline::after {
	content: '';
	position: absolute;
	width: 4px;
	background-color: #ccc;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.word {
	width: 100%;
	font: bold 12px arial, sans-serif;
	color: blue;
	position: relative;
	display: block;
	background: #fff;
	overflow: hidden;
	z-index: 999;
	clear: both;
	margin: 0 auto 30px auto;
	padding: 5px 0;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

1 commentaires

Que toi tellement

0
votes

Ceci est facilement résolu avec flex layout . Avec la mise en page flexible, il est beaucoup plus facile de superposer des applications complexes qu'avec une mise en page de bloc plus classique suggérée dans une autre réponse.

Vous pouvez jeter un œil aux dispositions flex et grille qui vous aident grandement à superposer les applications modernes.

< pre> XXX

Voici l ' exemple

0 commentaires