S'il vous plaît regarder l'imageComment afficher des ensembles d'un projet en ligne verticale et boutons balles
J'ai essayé:
CSS - Vertical line between bullets in an unordered list
J'ai obtenu le résultat ci-dessous :
Pouvez-vous s'il vous plaît aidez-moi là-bas? Je veux que ça ressemble à la première image.
Vous pouvez devenir un peu fou mais vous pouvez le faire. Je ne sais pas si je suggérerais ce code pour beaucoup de situations, car c'est «délicat» et je soupçonne qu'il pourrait être facilement perturbé.
.time-chart {
font-family: Arial, sans-serif;
font-size: 12px;
}
h3.start {
border: 0;
border-radius: 15px;
background: blue;
color: white;
display: inline-block;
font-weight: normal;
font-family: Arial, sans-serif;
font-size: 12px;
padding: .75em;
margin: 0;
margin-left: 105px;
}
ul.timeline {
padding-left: 170px;
margin-top: -6px;
}
ul.timeline li {
padding-left: 0;
margin-bottom: 2.5em;
list-style: none;
}
.event {
font-size: 1em;
display: inline-block;
margin-left: -160px;
font-weight: bold;
}
.event:after {
content: "•";
color: blue;
background: white;
border: 1px solid blue;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
left: -21px;
line-height: 12px;
text-align: center;
vertical-align: middle;
}
.description {
display: block;
margin-top: -12px;
padding-left: 10px;
}
/* BORDERS AND BULLETS */
p {
/*CSS reset*/
margin-bottom: 0;
}
ul.timeline li {
position: relative;
/* so that pseudoelements are positioned relatively to their "li"s*/
/* use padding-bottom instead of margin-bottom.*/
margin-bottom: 0;
/* This overrides previously specified margin-bottom */
padding-bottom: 2.5em;
}
ul.timeline li:after {
/* bullets */
content: "";
}
ul.timeline li:before {
/* lines */
content: "";
position: absolute;
left: -16px;
/* adjust manually */
border-left: 1px solid blue;
height: 100%;
width: 1px;
}
ul.timeline li:first-child:before {
/* first li's line */
top: 6px;
/* moves the line down so that it disappears under the bullet. Adjust manually */
}
ul.timeline li:last-child:before {
/* last li's line */
height: 6px;
/* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}<div class="time-chart ui-widget">
<h3 class="start">Journey Begins</h3>
<ul class="timeline">
<li> </li>
<li>
<div class="event">New Product Launch</div>
<p class="description">Jelly-o pie chocolate cake...</p>
</li>
<li class="green">
<div class="event">New York Times</div>
<p class="description">Jelly-o pie chocolate cake...</p>
</li>
<li class="green">
<div class="event">New York Times</div>
<p class="description">Jelly-o pie chocolate cake...</p>
</li>
<li> </li>
</ul>
</div>Merci beaucoup mon frère. Permettez-moi de le vérifier. Je vous ferai savoir. @Twisty –
Le code fonctionne! Merci. Pouvez-vous s'il vous plaît dire une chose. Comment puis-je faire la balle plus grande taille. Et sonner à l'extérieur n'est pas parfaitement aligné. Comment puis-je le faire? –
@FahmidaKhan Vous devriez vous familiariser avec CSS. Cela vous aidera. En outre, vous pouvez regarder la propriété '.event: after'. il a hérité de la taille de police de 12px, vous pouvez définir la taille de police à une autre valeur pour augmenter la taille de la puce, car c'est du texte. Vous devrez également ajuster 'width' et' height' si nécessaire. – Twisty
Partager le code que vous avez essayé de le faire! –