Split css menu

Hi, everyone.

I think it's a basic CSS, but I'm an outsider, so I'd like to ask for help.

If you look at the menu bar below, menu 1 and menu 2 are tilted to the left in a certain size

Where should I modify to make menu 1 and menu 2 look 50% divided? I'd like 50% of the total size (100%) to be menu 1 and the remaining 50% to be menu 2.

I ask for your help me.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home"> Menu1</a></li>
  <li><a href="#news"> Menu2</a></li>

</ul>

</body>
</html>

css menu-bar divide

2022-09-21 17:31

1 Answers

Fill the width of ul with 100% and set the display to the table.

If li specifies display:table-cell instead of float:left,

Each li is displayed in a table format.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;

    width: 100%;
    display: table;
}

Li {
    border-right:1px solid #bbb;

    display: table-cell;
}

2022-09-21 17:31

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656