What is the best way to arrange an unordered list in a horizontal layout?

Question

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

... (CSS code continues)

<div class="col-lg-12">
  <div class="row">

    <div class="col-md-6">
      <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
        <ul id="tree" class="dd-list">
          ... (HTML code continues)
        </ul>
      </div>
    </div>

Desired Layout:

 1. Doctor         patient

 2. Pharma Company Employee

html css

Answer 1

Answer №1

To create a tree-like structure with CSS, use the following rules:

.tree > ul > li {
    display: inline-block;
    background-color: #666;
    margin: 0 20px 20px 0;
    padding-bottom: 20px;
}
.tree > ul > li:nth-child(odd) {
    float: left;
}
.tree > ul > li a {
    color: #fff;
}

.tree >ul > li:nth-child(odd) {
  float: left;
}
.tree >ul > li {
display: inline-block;
  background-color: #666;
  margin: 0 20px 20px 0;
  padding-bottom: 20px;
}
.tree >ul > li a {
  color: #fff;
}
/* Additional styling for tree structure */
.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

/* More tree styling */
... (additional styles)

... Code snippet continues...

Answer 2

To create a tree-like structure with CSS, use the following rules:

.tree > ul > li {
    display: inline-block;
    background-color: #666;
    margin: 0 20px 20px 0;
    padding-bottom: 20px;
}
.tree > ul > li:nth-child(odd) {
    float: left;
}
.tree > ul > li a {
    color: #fff;
}

.tree >ul > li:nth-child(odd) {
  float: left;
}
.tree >ul > li {
display: inline-block;
  background-color: #666;
  margin: 0 20px 20px 0;
  padding-bottom: 20px;
}
.tree >ul > li a {
  color: #fff;
}
/* Additional styling for tree structure */
.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

/* More tree styling */
... (additional styles)

... Code snippet continues...

Answer 3

Answer №2

If you are utilizing Bootstrap and aiming to create a responsive layout, it is essential to use the "row" and "col-md" classes for proper alignment and spacing division.

To ensure responsiveness, each of the two adjacent items should be contained within separate <div class="level row"> elements where CSS styles can be applied.
When using "col-md-6", you will split the grid into half for the tree class view. Each column should have a "col-md-3" class assigned as
```
<li class="dd-item col-md-3">
```
.
In case you wish to maintain a side-by-side display on smaller viewports, simply add display:flex to the level class.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 35px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

/* Other styles omitted for brevity */

.level {
  display: flex;
}

.level>li {
  margin: 10px;
  width: 250px;
  background: gray;
  padding-bottom:10px;
}

Answer 4

If you are utilizing Bootstrap and aiming to create a responsive layout, it is essential to use the "row" and "col-md" classes for proper alignment and spacing division.

To ensure responsiveness, each of the two adjacent items should be contained within separate <div class="level row"> elements where CSS styles can be applied.
When using "col-md-6", you will split the grid into half for the tree class view. Each column should have a "col-md-3" class assigned as
```
<li class="dd-item col-md-3">
```
.
In case you wish to maintain a side-by-side display on smaller viewports, simply add display:flex to the level class.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}

.tree li::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 35px;
  height: 20px;
  right: auto;
  left: -20px;
  border-top: 1px solid #ccc;
}

/* Other styles omitted for brevity */

.level {
  display: flex;
}

.level>li {
  margin: 10px;
  width: 250px;
  background: gray;
  padding-bottom:10px;
}

Answer 5

Answer №3

To implement the desired layout, you can include the following code in your CSS file:

#tree {
  display: flex;
  flex-wrap: wrap;
}
#tree > li {
  flex-basis: 50%;
  box-sizing: border-box;
}

By using flexbox, the li elements will be displayed in a row. Each li will take up 50% of the width and will flow to the next line as necessary with flex-wrap: wrap;.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}
... (remaining CSS styles)

<div class="col-lg-12">
  <div class="row">

    <div class="col-md-6">
      <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
        <ul id="tree" class="dd-list">
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[0].IsChecked" type="hidden" value="false" />
              <label for="1">Doctor</label>
            </a>
            ... (more HTML structure)
          </li>
          ... (additional HTML structure)
        </ul>
      </div>
    </div>

Answer 6

To implement the desired layout, you can include the following code in your CSS file:

#tree {
  display: flex;
  flex-wrap: wrap;
}
#tree > li {
  flex-basis: 50%;
  box-sizing: border-box;
}

By using flexbox, the li elements will be displayed in a row. Each li will take up 50% of the width and will flow to the next line as necessary with flex-wrap: wrap;.

.tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.tree li::before {
  content: '';
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  right: auto;
  left: -20px;
  border-left: 1px solid #ccc;
  bottom: 50px;
}
... (remaining CSS styles)

<div class="col-lg-12">
  <div class="row">

    <div class="col-md-6">
      <div class="dd tree" id="nestable" style="background: #eceff4; padding: 6px;">
        <ul id="tree" class="dd-list">
          <li class="dd-item">
            <a href="#">
              <input data-val="true" data-val-required="The IsChecked field is required." id="1" name="DomainViews[0].IsChecked" type="checkbox" value="true" />
              <input name="DomainViews[0].IsChecked" type="hidden" value="false" />
              <label for="1">Doctor</label>
            </a>
            ... (more HTML structure)
          </li>
          ... (additional HTML structure)
        </ul>
      </div>
    </div>

What is the best way to arrange an unordered list in a horizontal layout?

Answer №1

Answer №2

Answer №3

Similar questions

Locating HTML snippets within a document

What is the best way to make a block fill 100% of a container-fluid?

Is it possible for a navbar in CSS to collapse based on its width?

Every key must be a string or number; received a function instead

Can HTML be transferred between browser tabs using Angular?

Adjusting the size of an image based on the size of the window

What is the best way to place an "Add row" button directly in front of every horizontal row border within a table?

When utilizing state in ReactJS to modify the color of my button, the change does not take effect on the first click. How can I troub

Building a Sleek Hover Effect Dropdown Menu Using HTML and CSS

Scrapy spider malfunctioning when trying to crawl the homepage

Exploring the Power of Nested *ngFor in Angular 2

Choose every fourth row in the table

Angular - ui-router states are not being detected

Display the background image beyond the boundaries of the div element

Conceal a different div unless it includes

Looking to access files from the Android asset folder within an HTML document?

Looping through an array of objects in VueJS can become a bit tricky when dealing with objects whose properties are dynamic. How can I efficiently

Failure to Connect HTML with Stylesheet

Modify the location of the input using jQuery

"How to automatically populate an input field with a value when the page loads in an