Question

I created a box in css and put text inside of the box. I would like it to be a list. However, when I try to use it messes up the formatting of the entire page. I also tried the solution here: CSS list-style-type not working, but that didn’t work either. My original code is below. My question is, is it the list- style or the box that I created that might be giving me the problem?

<p class = "total" style= "background-color: #C6C29E;opacity:.9;height:2000px;width:500px;float:left;color:black;text-shadow: 4px 0px #aaa;list-style-type:circle;">
<li>Text</li><br>
    <li>Text<br></li>
 </p>

Thanks

Answer 1

I agree with Joseph. It’s a bad idea wrapping a <p> tag around an <li> element and using <br> tags this way. You should use CSS to style the content rather than using the <br> tags to do it for you.

If you’re wanting to just add list items into its own self expanding box does this help at all or is this not quite what you mean?

<ul class="my-list">
  <li>text</li>
  <li>text</li>
</ul>

ul.my-list {
  background: red;
  padding: 20px;
  float: left;
}