Horizontal List Items

Horizontal list items

Updated Answer

I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>

list items horizontally rather than vertical using ul li tags

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

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

Something like that perhaps?

Horizontal list items - fit to 100% with even spacing

The new CSS flexbox specification would be the solution to your problem :)

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    background: #cacaca;    margin: 0;    padding: 0;}li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background: #fafafa;}

<ul>    <li>This is menu item 1</li>    <li>Number 2</li>    <li>Item Number 3</li>    <li>Menu 4</li></ul>

CSS list-horizontal

You can do it in following way:

body {  background: #077054;  color: #315f52;}
.header {  text-align: center;}.header a {  text-decoration: none;  color: #99fa99;  font-size: 20px;  font-weight:normal;  font-family: "latoregular";}.header span {  color: #b6d8cf;  font-size: 26px;  text-transform: uppercase;  font-family: 'nixie_oneregular';
}
.listHorizontal {  display: flex;  justify-content: space-around;  color: #b6d8cf;  font-size:30px;  text-transform: uppercase;  list-style: none;}

   <div class="header">    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">      <h1>Belle & Carrie</h1>    </a>    <span>rehabilitation yoga    </span>  </div>
  <ul class="listHorizontal">    <li>Home</li>    <li>About</li>    <li>Contact Us</li>    <li></li>  </ul>

Horizontal list item with line between

Here is an example of a line running between each of the lis.

Sample Image

Add position: relative to the ul so it becomes parent to :after element
Position :after in the vertical middle of the characters using vertical translation
Provide z-index and background-color to lis so they stay "on top of" of the gray line

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    margin: 0;    padding: 0;    position: relative;}
li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background-color: white;    padding: 0 0.75em;    z-index: 1;}
li:first-child {    padding-left: 0;}
li:last-child {    padding-right: 0;}
ul:after {    content: '';    border-bottom: 1px solid lightgray;    position: absolute;    transform: translateY(-50%);    top: 50%;    width: 100%;}

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

MUI - How do you make a horizontal List?

So far I have:

const flexContainer = {
  display: 'flex',
  flexDirection: 'row',
  padding: 0,
};

return (
  <List style={flexContainer}>
    <ListItem
      primaryText="foo1"
      secondaryText="bar1"/>
    <ListItem
      primaryText="foo2"
      secondaryText="bar2"/>
  </List>
);

This works. Looking for a potential better answer / opinions. Should this be built in?

How can i make list items in a horizontal container fill the entire container evenly without spacing between?

Remove all extern padding/margin then use flex:1 and padding within li:

.wrapper {  margin-top: 30px;  border: 1px solid lightblue;  width: 100%;}
ul {  padding:0;  margin:0;  display: flex;  flex-wrap: wrap;}
li {  color: black;  flex:1;  text-align:center;  padding:10px 0;  cursor: pointer;  list-style: none}
li:hover {  background-color: lightblue;  color: white;}

<div class="wrapper">  <ul>    <li>123</li>    <li>ABC</li>    <li>789</li>    <li>XYZ</li>  </ul></div>