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

Question

我有一个非常奇怪的要求，我必须在 p 标签内的 a 内显示一个列表样式的光盘。尽管 span 是一个内联级别元素，但考虑到 p 标签的性质，列表会在第二行呈现。我想让 span 和 p 中的文本在一行中呈现。这是一个截图供您引用

正如您在 (Central Time Zone) 文本后看到的那样，我希望光盘和周一至周五的文本呈现在同一行中。我无法找到如何解决这个问题。非常感谢您提前提供帮助。到目前为止，这是我尝试过的方法。

.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>

Answer 1

或者如果您不想根据@Shital Marakana 使用ul li，请使用伪元素回答。

.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>