在p元素的span內設置光盤樣式
[英]style a disc inside of the span inside of the p element
問題描述
我有一個非常奇怪的要求，我必須在其中顯示列表樣式的光盤，該光盤位於ap標簽內。 由於盡管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>
3 個解決方案
解決方案1
2 已采納 2017-10-30 07:14:22
或者使用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>
解決方案2
2 2017-10-30 07:15:34
將text-indent添加到bullet-disc class ，然后使用:before css標簽添加bullet樣式
.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>
解決方案3
1 2017-10-30 07:10:20
您可以使用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>
動態文本追加到<span>元素內</span> <p> <span>元素破壞了我的設計</span>
[英]Dynamically appending Text to a <span> element inside a <p> element breaks my design
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.