Question

我有一个非常奇怪的要求，我必须在一个位于p标签内的列表式光盘中显示。因为即使span是内联级别元素，因此考虑到p标记的性质，列表在第二行中呈现。我想让span和p中的文本在一行中呈现。以下是供您参考的屏幕截图

正如您在（中央时区）文字后看到的那样，我希望光盘和周一至周五的文字呈现在同一行。我无法找到如何解决这个问题。非常感谢您的帮助。这是我到目前为止所尝试的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您不想根据pseudo-element回答使用ul li，请

或使用@Shital Marakana。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将text-indent添加到bullet-disc class，然后使用:before css标记添加项目符号样式

.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;
  text-indent: 35px;
  position: relative;
}
.bullet-disc:before{
  content: '•';
  position: absolute;
  left: -15px;
  top: 0;
}

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

您可以使用ul li。

显示光盘样式

.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;
}

.center-text-details ul li {
  list-style: disc outside none !important;
  display: list-item;
}

<!doctype html>
<html>
<head>
</head>

<body>
<section id="extra-info">
  <div class="container">
    <p class="center-text-details">8:00am - 5:00pm (Central Time Zone) <ul><li>Monday - Friday</li></ul></p>
  </div>
</section>
</body>
</html>

在p元素内部的span内部设置一个光盘

3 个答案: