Arranging two list items (<li>) side by side in HTML code

I am currently designing a form with a side navigation bar that will display around 15-20 elements. Each element is represented by an <li> containing a link to open a modal when clicked.

This is the current structure of my code:

<div id="sidebar-wrapper">
      <ul class="sidebar-nav">
         <h4 class="sidebar-brand">Select Field Type</h4>
         <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li>

   </div>

And this is the current layout:

Single Line
Pick List
Multi Select
Multi Line
Email
Phone Number
Mobile Number
Date
Time
Date-Time
Checkbox
Radio
Decimal
Number
Auto Number

However, I would like the layout to appear as follows:

|   Single Line   |  Pick List    |
| Multiple Select |    Email      |
| Phone Number    | Mobile Number |
|     Date        |    Time       |
|   Checkbox      |   Radio       |
|   Decimal       |   Number      |
|  Auto Number    | (additional li)|

To achieve this, how can I adjust my CSS or make changes to the HTML code?

The reason for this desired layout change is that as more <li> items are added, they quickly overflow and become hidden. What steps should I take to ensure all elements are visible in the format I want?

htmlcss

Answer №1

To utilize multiple columns in CSS3, you can make use of the column-count property.

For example:

.sidebar-nav {
  column-count: 2; /* Set the number of columns */
}

Take a look at the code snippet below:

.sidebar-nav {
  column-count: 2;
}
<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
      <ul class="sidebar-nav">
         <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
         <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
         <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
         <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
         <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li>

   </div>

Hopefully this explanation is helpful!

Answer №2

Follow these steps to achieve the desired result:

ul, li{
list-style:none;
}

.f-l{
  float:left;
}
<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
      <ul class="sidebar-nav">
         <li>
           <ul class="f-l">
             <li>Single Line<li>
             <li>Multiple Select<li>
             <li>Phone Number<li>
             <li>Date<li>
             <li>Checkbox<li>
             <li>Decimal<li>
             <li>Auto Number<li>
           </ul>
        </li>
        <li>
          <ul class="f-l">
             <li>Pick List<li>
             <li>Email<li>
             <li>Mobile Number<li>
             <li>Time<li>
             <li>Radio<li>
             <li>Number<li>
           </ul>
        </li>
      
      
      </ul>

   </div>

Answer №3

Apply CSS selectors :nth-child(odd) and :nth-child(even) in order to assign float: left and float: right styling respectively. Additional settings may be required for optimal display.

Answer №4

Consider implementing the following CSS code:

div {
  width: 300px;
}

span {
  display: block;
  font-size: 18px;
}

Answer №5

If you need assistance, feel free to check out this JSFiddle:

https://jsfiddle.net/9tyrhwec/

  <div id="sidebar-wrapper">
<ul class="sidebar-nav">
  <h4 class="sidebar-brand">Choose Field Type</h4>
  <table>
  <tr>
    <td><li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
  <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
  <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
  <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li></td>
    <td><li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
  <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
  <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
  <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
  <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li></td>
  </tr>
  </table>


  </ul>

Answer №6

If you want to achieve this layout, consider splitting it into two ul's floated next to each other like the following example:

<style>
    .sidebar-nav_wrapper
    {
       float: left;
       margin-left: 5px;
       width: 250px;
       position: relative;
       height: 650px;
    }
</style>

<div id="sidebar-wrapper">
  <h4 class="sidebar-brand">Select Field Type</h4>
        <div class="sidebar-nav_wrapper">

          <ul class="sidebar-nav">

             <li><a href="#" data-toggle="modal" data-target="#SingleLine_Modal">Single Line</a></li>
             <li><a href="#" data-toggle="modal" data-target="#PickList_Modal">Pick List</a></li>
             <li><a href="#" data-toggle="modal" data-target="#MultiSelect_Modal">Multi Select</a></li>
             <li><a href="#" data-toggle="modal" data-target="#MultiLine_Modal">Multi Line</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Email_Modal">Email</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Phone_Modal">Phone Number</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Mobile_Modal">Mobile Number</a></li>
        </ul>
        </div>
        <div class="sidebar-nav_wrapper">
          <ul class="sidebar-nav">
             <li><a href="#" data-toggle="modal" data-target="#Date_Modal">Date</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Time_Modal">Time</a></li>
             <li><a href="#" data-toggle="modal" data-target="#DateTime_Modal">Date-Time</a></li>
             <li><a href="#" data-toggle="modal" data-target="#CheckBox_Modal">Checkbox</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Radio_Modal">Radio</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Decimal_Modal">Decimal</a></li>
             <li><a href="#" data-toggle="modal" data-target="#Number_Modal">Number</a></li>
             <li><a href="#" data-toggle="modal" data-target="#AutoNumber_Modal">Auto Number</a></li>
 </ul>
        </div>
   </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with CSS rendering font in a suboptimal way

Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...

csswebfonts

Json data integrated dropdown menu

I have successfully retrieved data from a Json array and displayed it in a dropdown list. However, I am facing an issue where I want to only show the name of the city instead of both the name and description. If I remove cities[i]['description'], ...

javascripthtmljson

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

This is the form that I have designed for displaying information: <form name='foodlist' action='checkout' method='POST'> <table> <tr> <td>Product Name</td> <td>Price</t ...

javascriptphpjqueryhtmlajax

Centering an icon in tandem with Typography text using Material UI

Is there a way to align an icon with the text so that they are on the same level? Currently, it seems like the icon is slightly above the text. I've tried using padding-top: 5px and margin-top: 5px, but those solutions didn't work as expected. ...

cssreactjsmaterial-uireact-icons

Press on any two table cells to select their content, highlight it, and save their values in variables

I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...

javascripthtmlmysql

I'm having trouble with my bootstrap dropdown and I've exhausted all of my options trying to fix it based on my current understanding

My dropdown menu is not working despite adding all necessary Bootstrap CDN and files along with the jQuery script. Even with the table being handled by JavaScript, the button does not respond when clicked repeatedly. I suspect the issue lies within the han ...

javascripthtmljquerycssbootstrap-4

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

Command line functionality to eliminate comments in HTML minifier

I am interested in utilizing html-minifier to compress my html documents. After executing the command npm install -g html-minifier, I have successfully installed it. However, the command sudo html-minifier rb.html --removeComments did not eliminate comme ...

htmlnpmminify

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

After adding new menu separators, the alignment of my social media icons has been thrown off and I need them to be centered. I'm not sure why this happened or how to fix it. I attempted to add some CSS but had no success. My website can be found at . ...

htmlcsswebiconsalignment

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

csshtmlheight

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview

What is the best way to align content in the middle of a containing div?

I am struggling with centering text and images inside a div that is 190px x 190px. Despite searching on various platforms, including SO and Google, I have not found a simple solution. Can someone please provide guidance on the easiest way to achieve verti ...

csshtml

Tips for updating the background color of a dropdown menu in the navigation bar

I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area. .navbar a { width: 125px; text-align: center; ...

htmlcssbootstrap-4

Looking to extract the hidden value from an HTML input field using Selenium

Unable to retrieve the value of a hidden element in HTML, even though it is displaying. Seeking assistance in accessing the value despite the type being hidden. <input type="HIDDEN" label_value="Sub Reference" title="Sub Reference" id="ACC_NO" dbt="BK_ ...

javahtmlseleniumselenium-webdriver

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

The CSS root variable is failing to have an impact on the HTML element's value

I'm in the process of changing the text color on home.html. I've defined the color property in a :root variable, but for some reason, it's not appearing correctly on the HTML page. Take a look at my code: home.scss :root { --prim-headclr : ...

htmlcsstypescriptsass

Is there a way to showcase an epub format book using only HTML5, CSS, and jQuery?

Can ePub format books be displayed in a web browser using only HTML5, CSS, and jQuery? I would appreciate any suggestions on how to accomplish this. Additionally, it needs to be responsive so that it can work on iPad. While I am aware of this requirement, ...

javascriptjqueryhtmlcssepub

Guide on creating a logarithmic-based bar rating system

I am working on creating a bar rating system for my website, but the current design doesn't look great. I want the height of the bars to increase like an exponential curve gradually, starting off not too steep and gradually increasing afterward. Here ...

jquerycssratingvotingvoting-system

What is the reason for index always being not equal to 0?

<script> var index = 0; $.getJSON("./data/data.json", function(json) { $.each(json, function(data) { var html = ""; if(index == 0) { console.log(index + " fir ...

javascriptjqueryhtml

Add to and subsequently remove the possibility of deleting that element

I encountered an issue while moving elements from one div (x) to another div (y). The problem is that the elements in div x are deletable, but once they are copied to div y, they cannot be deleted. Here is the initial state: After deleting Filter 1, the ...

javascriptjqueryhtmlcss