Displaying items side by side instead of stacking them on top of each other can be achieved by utilizing the <ul><li>

Question

Displaying items side by side instead of stacking them on top of each other can be achieved by utilizing the <ul><li>

My webpage displays items vertically, but I need them to be horizontal. Which CSS element should I use to achieve this?

This is the code snippet:

<ul class="jobs">
        <li>
            <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

                <div class="company">desc1</div></li>

        <li>
            <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

                <div class="company">desc2</div></li>
    </ul>

Check out the demo page here:

css

Answer 1

Answer №1

.employment {
list-style-type: none;
padding:0;
margin:0;
}

.jobs > li {
display: inline-block;
}

Does this resemble what you were thinking?

Answer 2

.employment {
list-style-type: none;
padding:0;
margin:0;
}

.jobs > li {
display: inline-block;
}

Does this resemble what you were thinking?

Answer 3

Answer №2

To get your list items to align horizontally, set the display property to inline.

Here's an illustration:

li{display:inline}

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

Answer 4

To get your list items to align horizontally, set the display property to inline.

Here's an illustration:

li{display:inline}

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

Answer 5

Answer №3

employ

ul {
    display: inline-block;
}

for spacing the unordered list items next to each other.

Answer 6

employ

ul {
    display: inline-block;
}

for spacing the unordered list items next to each other.

Answer 7

Answer №4

To align elements side by side, you can utilize the float property in CSS. However, be sure to clear after floating elements to avoid any layout issues.

For example:

.jobs {
  list-style: none;
}

.jobs li {
  float: left;
  margin-left: 12px;
}

.jobs::after {
  content: "";
  display: table;
  clear: both;
}

<ul class="jobs">
  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc1</div>
  </li>

  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc2</div>
  </li>
</ul>

Answer 8

To align elements side by side, you can utilize the float property in CSS. However, be sure to clear after floating elements to avoid any layout issues.

For example:

.jobs {
  list-style: none;
}

.jobs li {
  float: left;
  margin-left: 12px;
}

.jobs::after {
  content: "";
  display: table;
  clear: both;
}

<ul class="jobs">
  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc1</div>
  </li>

  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc2</div>
  </li>
</ul>

Answer 9

Answer №5

Avoid using floats for layout unless absolutely necessary as they can be quite buggy. Floats are best utilized for removing an element from the normal document flow while allowing content to wrap around it, such as with an image within a paragraph.

Instead of using floats, consider setting font size: 0 on the container to eliminate unwanted white space between items and use white-space: nowrap to keep them in line when the container exceeds the window size. Then reset the font and white-space properties in the child elements and set them to display: inline-block.

By opting for inline-block instead of inline, you gain the ability to adjust the width and height of each element individually.

Note: Setting the font for html to reference later enables the use of rem units that correspond to the font size of the root element. For instance, 1rem in this scenario resets the font size to match that of the root element.

ul {
    font-size: 0;
    white-space: nowrap;
}
li {
    display: inline-block;
    font-size: 1rem;
    white-space: initial;
}

Answer 10

Avoid using floats for layout unless absolutely necessary as they can be quite buggy. Floats are best utilized for removing an element from the normal document flow while allowing content to wrap around it, such as with an image within a paragraph.

Instead of using floats, consider setting font size: 0 on the container to eliminate unwanted white space between items and use white-space: nowrap to keep them in line when the container exceeds the window size. Then reset the font and white-space properties in the child elements and set them to display: inline-block.

By opting for inline-block instead of inline, you gain the ability to adjust the width and height of each element individually.

Note: Setting the font for html to reference later enables the use of rem units that correspond to the font size of the root element. For instance, 1rem in this scenario resets the font size to match that of the root element.

ul {
    font-size: 0;
    white-space: nowrap;
}
li {
    display: inline-block;
    font-size: 1rem;
    white-space: initial;
}

Answer 11

Answer №6

If you're looking for a way to showcase information, consider using a table:

<table>
  <tr>
    <td>
      <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />
      <div class="company">description 1</div></li>
    </td>
    <td>
      <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />
      <div class="company">description 2</div></li>
    </td>
  </tr>
</table>

Answer 12

If you're looking for a way to showcase information, consider using a table:

<table>
  <tr>
    <td>
      <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />
      <div class="company">description 1</div></li>
    </td>
    <td>
      <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />
      <div class="company">description 2</div></li>
    </td>
  </tr>
</table>

Displaying items side by side instead of stacking them on top of each other can be achieved by utilizing the <ul><li>

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Trouble with implementing Angular Material button color when using routerLinkActive

Ensure that a div with fluid width remains consistently centered within another div

Is it possible to increase the delay in the nth-child selector?

Adjust the Weight of a Single Word in H1 CSS

Is CodeMirror's PHP mode failing to function properly?

What is the best way to expand this HTML5 canvas script to fill the entire screen?

Designing a dropdown menu using CSS

What methods can be used to identify the specific Router component being rendered in React?

What is the best way to align a container in the middle of the page without positioning the text in the center

Tips for structuring a webpage section on a smaller screen using Bootstrap

What is the best way to apply the same effect to multiple images without affecting the ones I haven't hovered over?

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

sophisticated HTML navigation bar

What steps are involved in building a modal pop-up in Angular without using any pre-existing libraries

Position the table at the bottom of the page using CSS

Tips on adjusting section height as window size changes?

How to set a DIV width in CSS to enable scrolling on an iPad 2

`Exploring the magic of CSS image overlay feature`

What causes the unusual behavior of `overflow-x: auto;` when used within a parent element with `flex-direction: row;` styling