Why is my unordered list getting pushed to the right side?

Kelly Norton

I know next to nothing about HTML, and even less about CSS, and dear lord what I wouldn't give for a WYSIWYG editor that makes this stuff easier!

I simply can't understand why the unordered list I have created does not appear directly underneath the text above it!

I've placed the relevant snippits in jsbin

https://jsbin.com/kebidikozu/edit?html,output

And here is the code in question:

.upper {
  max-height: 100%;
  padding-top: 40px;
  padding-bottom: 170px;
  overflow: auto;
}

.downwarning {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  font-size: 90%;
  color: gray;
}

ul {
  display: table;
  margin: 0 auto;
  list-style-type: disc;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
<div class="upper" id="upperid">

<span class="downwarning">this is just some text i right now it really doesnt matter what is says but WHY OH WHY is my haiku UL getting pushed to the right?:
    <br>
    <br>
    <ul>
      <li>It's not DNS</li> 
      <li>There is no way it is DNS</li>
      <li>It was DNS</li>
    </ul>
  </span>

</div>

If anyone can let me know why this format nightmare is happening it would be most appreciated!

Andish

Because you put the <ul> tag inside the <span> tag the list display after the text , if you close the <span> tag and then write <ul> tag, the list appears under the text.

<span class="downwarning">
this is just some text i right now it really doesnt matter what is says but WHY OH WHY is my haiku UL getting pushed to the right?:
</span>
    <br>
    <br>
    <ul>
      <li>It's not DNS</li> 
      <li>There is no way it is DNS</li>
      <li>It was DNS</li>
    </ul>

If you don't want to change the html you can remove the display: flex in css.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2023-08-20

Comments

0 comments

Getting right side numbers of my Id

Why is my unordered list getting pushed to the right side?

Why is my unordered list getting pushed to the right side?

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Using Response.Redirect with Friendly URLS in ASP.NET

Can a 32-bit antivirus program protect you from 64-bit threats

Double spacing in rmarkdown pdf

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

3D Touch Peek Swipe Like Mail

Bootstrap 5 Static Modal Still Closes when I Click Outside

Assembly definition can't resolve namespaces from external packages

Vector input in shiny R and then use it

Emulator wrong screen resolution in Android Studio 1.3

Svchost high CPU from Microsoft.BingWeather app errors

Graphics Context misaligned on first paint

Python connect to firebird docker database

Is this docker-for-mac password dialog legit?

How to save models trained locally in Amazon SageMaker?