Tengo un requisito muy extraño, en el que tengo que mostrar un disco de estilo de lista dentro de un disco que reside dentro de una etiqueta p. Dado que aunque span es un elemento de nivel en línea, piense en la naturaleza de la etiqueta p, la lista se representa en la segunda línea. Quiero tener el texto en span y p para representar en una sola línea. Aquí hay una captura de pantalla para su referencia.

enter image description here

Como puede ver después del texto (Zona horaria central), quiero que el disco y el texto de lunes a viernes se procesen en la misma línea. No puedo encontrar la forma de entender esto. Muchas gracias por ayuda de antemano. Esto es lo que he intentado hasta ahora.

.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>
0
Ramji Seetharaman 30 oct. 2017 a las 10:03

3 respuestas

La mejor respuesta

O use pseudo-element si no desea usar ul li de acuerdo con la respuesta @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
Pedram 30 oct. 2017 a las 07:14

Agregue text-indent a bullet-disc class, y luego agregue el estilo de viñeta usando la etiqueta css :before

.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
Mario Rawady 30 oct. 2017 a las 08:12

Puede mostrar el estilo del disco utilizando 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>
1
Shital Marakana 30 oct. 2017 a las 07:10