我有一个非常奇怪的要求,我必须在一个位于p标签内的列表式光盘中显示。因为即使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>
&#13;
答案 0 :(得分:2)
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;
}
&#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;
答案 1 :(得分: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>
答案 2 :(得分:1)
您可以使用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>