Stellen Sie sicher, dass alle Divs derselben Klasse auf die größte Div-Größe angepasst sind

Question

Also habe ich ein paar Divs wie diese:

<div class="personal-events-list">
    <div class="specific-event black-font">Something</div>
    <div class="specific-event black-font">Something else</div>
    <div class="specific-event black-font">Something more</div>
</div>

Ich möchte, dass sie die gleiche Größe haben (vorausgesetzt, die größte Größe macht Sinn), so: https://i.stack.imgur.com/XxgzK.jpg

Aktuell habe ich so etwas: https://i.stack.imgur.com/TZmKt.jpg

Derzeit habe ich CSS mit „width: fit-content“, aber dadurch sind sie einfach unterschiedlich groß. Die einzige wirkliche Lösung, die ich mir ausgedacht habe, besteht darin, ihnen allen eine feste Größe zu geben, etwa „Breite: 300 Pixel“, aber dadurch sehen einige der größeren/kleineren Namen etwas unkonventionell aus ... Gibt es eine Möglichkeit, dies zu tun? für mich Willst du etwas?

Vielen Dank für Ihre kostbare Zeit!

Edit 1: CSS hinzufügen

.specific-event {
  width: fit-content;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

Answer 1

尝试将 width: fit-content 添加到 .personal-events-list 而不是 .special-event

像这样：

.specific-event {
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
  padding: 5px 10px;
  background-color: #d1d1d1;
  border-radius: 8px;
}

.specific-event:hover {
  background-color: #9c9c9c;
  color: white;
}

.personal-events-list {
  width: fit-content;
}

    
Something
    
Something else
    
Something more