Inside div <ol> is properly working but <ul> is not working. How to solve this?
Inside div of bootstrap classes I want to create an ul but it floats automatically but ol is working perfectly. I searched in my best way for the solution in stackoverflow. If this problem had already answered my apologies.
<div class="col-md-8 col-xs-6 about-content"> <h2>The short</h2> <ul class="menu"> <li>item-1</li> <li>item-2</li> <li>item-3</li> <li>item-4</li> <li>item-5</li> </ul> <h2>The long</h2> <p> content </p> </div> I applied KISS rule in CSS and any other possible solutions available in stackoverflow. But, I can’t figure out the mistake. Please help me to resolve this issue. Thanks in advance!
Remove
ul li { display: inline-block; }when you makeinline-blockforlithen it makes as same line OR inline.
.about-content { margin-left: 40px; border: 1px solid #EFF0F1; width: 900px; height: 550px; margin-bottom: 4%; text-align: left; } #menu { padding-top: 10px; padding-bottom: 10px; text-align: left; } #menu ul { margin: 0; padding: 0; display: inline-block; list-style: none; /*Set display to inline-block to the ul*/ } #menu li { text-decoration: none; } ul { text-align: center; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="col-md-8 col-xs-6 about-content"> <h2>The short</h2> <ul id="menu"> <li>item-1</li> <li>item-2</li> <li>item-3</li> <li>item-4</li> <li>item-5</li> </ul> <h2>The long</h2> <p> content </p> </div>
What about something like this
If you want list like
item-1 item-2 item-3 item-4 item-5
.about-content{ margin-left: 40px; border: 1px solid #EFF0F1; width: 900px; height: 550px; margin-bottom: 4%; text-align: left; } .menu{ padding-top: 10px; padding-bottom: 10px; text-align: left; } .menu ul{ margin:0; padding:0; display: inline-block; list-style: none; /*Set display to inline-block to the ul*/ } .menu li{ text-decoration: none; } ul { text-align: center; } ul li { display: inline-block; } <div class="col-md-8 col-xs-6 about-content"> <h2>The short</h2> <ul class="menu"> <li>item-1</li> <li>item-2</li> <li>item-3</li> <li>item-4</li> <li>item-5</li> </ul> <h2>The long</h2> <p> content </p> </div>Now <ul> or Un-ordered list displaying side-by-side properly.
If you want list like
item-1 item-2 item-3 item-4 item-5 .about-content{ margin-left: 40px; border: 1px solid #EFF0F1; width: 900px; height: 550px; margin-bottom: 4%; text-align: left; } .menu{ padding-top: 10px; padding-bottom: 10px; text-align: left; } .menu ul{ margin:0; padding:0; } .menu li{ text-decoration: none; list-style: none; } ul { text-align: center; } <div class="col-md-8 col-xs-6 about-content"> <h2>The short</h2> <ul class="menu"> <li>item-1</li> <li>item-2</li> <li>item-3</li> <li>item-4</li> <li>item-5</li> </ul> <h2>The long</h2> <p> content </p> </div>
