javascript - 在p元素的span内设置光盘样式

我有一个非常奇怪的要求，在这里我必须在位于p标记内的a内显示列表样式的光盘。由于尽管span是内联级别的元素，所以请考虑p标签的本质，该列表将在第二行中呈现。我想同时显示span和p中的文本以在一行中呈现。这是截图供您参考



如您所见，在（中央时区）文本之后，我希望光盘和星期一至星期五的文本显示在同一行中。我无法找到解决方法。预先感谢您的帮助。到目前为止，这是我尝试过的。

.body-text-info {
  font-family: Nexa W01 XBold !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.center-text-details {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #77777A !important;
}

.bullet-disc {
  list-style: disc outside none !important;
  display: list-item;
}

<section id="extra-info">
  <div class="container">
    <p class="center-text-details">8:00am - 5:00pm (Central Time Zone) <span class="bullet-disc"> Monday - Friday </span></p>
  </div>
</section>

最佳答案

如果不想根据pseudo-element答案使用ul li，请使用@Shital Marakana。

.bullet-disc::before {
    content: "●";
    display: inline-block;
}

.body-text-info {
  font-family: Nexa W01 XBold !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.center-text-details {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #77777A !important;
}

.bullet-disc {
    display: block;
}

.bullet-disc::before {
    content: "●";
    display: inline-block;
}

<section id="extra-info">
  <div class="container">
    <p class="center-text-details">8:00am - 5:00pm (Central Time Zone) <span class="bullet-disc"> Monday - Friday </span></p>
  </div>
</section>