style a disc inside of the span inside of the p element
Question
I have a very strange requirement, where in I have to display a list-style disc inside of a which resides inside ap tag. Since Even though span is an inline level element, think because of the nature of p tag, the list renders in the second line. I want to have the text in both span and p to render in a single line. Here is a screenshot for your reference
As you can see after the (Central Time Zone) text, I want the disc and the text Monday-Friday render in the same line. I am not able to find how to figure this. Thanks a lot for help in advance. Here is what I have tried so far.
.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 answers
solution1
2 ACCPTED 2017-10-30 07:14:22
Or use pseudo-element if you don't want use ul li according to @Shital Marakana answer.
.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>
solution2
2 2017-10-30 07:15:34
Add text-indent to the bullet-disc class , and then add the bullet style using the :before css tag
.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>
solution3
1 2017-10-30 07:10:20
You can display disc style by using 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.