Как сделать так, чтобы каждая вкладка панели навигации помещалась на экране одинаково

Question

Это мой первый сайт, и я создаю рандомизатор персонажей D & D. Я создаю навигационную панель и пытаюсь сделать так, чтобы каждая из четырех панелей уместилась на экране одинаково (независимо от размера экрана). Я надеялся, что кто-нибудь сможет сказать мне, что добавить и удалить из моего существующего кода. Я включил все CSS и HTML, необходимые для воспроизведения моей проблемы. Еще раз спасибо.

/* CSS for the Menu */
#Menu {
    font-size: 25px; /* Font size of 25 px */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
     list-style-type: none; /* No Bullets */
     overflow: hidden; /* No Scroll Wheel */
     background-color: rgb(77, 39, 21); /* Background colour of the Menu */
     margin-bottom: 0px; /* Margin from the top div is 0 */
     margin-top: 0px; /* Margin from the top div is 0 */
     padding: 0;
   }
   
   /* CSS for Menu Edges*/
   #Menu li {
     float: left; /* Menu is floated to the Left to make it all in one line */
     border-right: 1px solid rgb(104, 99, 99); /* Left border line of 1 px separating blocks. */
     border-left: 1px solid rgb(104, 99, 99); /* Right border line of 1 px separating blocks. */
   
   }
   
   /* CSS for Menu Tabs */
   #Menu li a {
     display: block; /* Turns it into a block display */
     color: rgb(187, 180, 180); /* Background colour of Text */
     text-align: center; /* Aligns text to the middle of the block */ 
     padding: 16px 177px; /* Padding of 16px and 177 px between blocks */
     text-decoration: none; /* Makes sure there are no underlines */
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Answer 1

Надеюсь, приведенный ниже код поможет. Я прокомментировал места, где я вносил коррективы, но я также предоставил вам более чистую версию вашего кода, чтобы вы могли видеть, как он может выглядеть.

Кроме того, рассмотрите возможность использования CSS Grid, поскольку это может помочь уменьшить избыточность кода.

HTML / CSS Стиль

*{
    margin:0;  
    padding:0;
    box-sizing:border-box;
   }

#Menu {
    width:100%;
   }
   
#Menu ul {
    font-size: 100%; 
    list-style-type: none; 
   }
    
#Menu li {
     display: inline-block; 
     width: calc(100%/4); 
     text-align: center;
     padding: 16px 0px;
     float: left; 
     border-right: 1px solid rgb(104, 99, 99); 
     background-color: rgb(77, 39, 21); 
   }    
    
#Menu li:nth-child(1){ 
     border-left: 5px solid red; 
   }
   
#Menu a {
     color: rgb(187, 180, 180); 
     text-decoration: none;
     font-size: 100%;
   }

<!--end snippet-->

<!-- begin snippet: js hide: false console: true babel: false -->

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

HTML / CSS - с комментариями

*{
margin:0;   /* zero-out MARGINS and PADDING */
padding:0;
box-sizing:border-box; /* helps keep dimensions of any block elements when they resize */
}

#Menu {
    /* don't target the Menu as a whole
    unless you want ALL the children to 
    have the same traits you intend for 
    your menu items (e.g. if you want menu
    items to be 25px as well as P elements
    throughout the contents of the div)*/
    
    width:100%; /* assuming you want it to expand the entire width of the window*/
    
 /* width:800px; <------ use this method if you want a FIXED size */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
    font-size: 100%; /* Font size of 25 px */
    list-style-type: none; 
    }
   
   /* CSS for Menu Edges*/
   #Menu li {
     display: inline-block; /*INLINE-BLOCK (otherwise each list item takes up the whole line)*/
     width: calc(100%/4); /* 100% width DIVIDED by No. of Elements (list items) */
     text-align: center;
     float: left; /* Menu is floated to the Left to make it all in one line */
     border-right: 1px solid rgb(104, 99, 99); /* right border of ALL OTHER menu items. */
     background-color: rgb(77, 39, 21); 
     padding: 16px 0px; /* the padding is added to each INLINE-BLOCK element (each list item) rather than the anchor (link)*/
    }
    
#Menu li:nth-child(1){ /* left border of FIRST menu item. */
     border-left: 5px solid red; /*made it RED so you could see how it works. ALSO because of BOX-SIZING: border-box, the border grows INWARDS rather than make the element larger*/
    }
   
#Menu a {
     color: rgb(187, 180, 180); /* Background colour of Text */
     text-decoration: none; /* Makes sure there are no underlines */
     font-size: 100%;
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Answer 2

Этот код должен делать то, что вам нужно.

Он использует Flexbox, о котором вы можете прочитать подробнее здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Мы только что добавили display: flex для элемента ul и flex: 1 для li s.

flex: 1 является сокращением для flex-grow: 1 и означает: оставшееся пространство в контейнере будет распределено в равной степени всем дочерним элементам .

float больше не требуется с flexbox, как и большое горизонтальное заполнение элементов a.

/* CSS for the Menu */
#Menu {
    font-size: 25px; /* Font size of 25 px */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
     list-style-type: none; /* No Bullets */
     overflow: hidden; /* No Scroll Wheel */
     background-color: rgb(77, 39, 21); /* Background colour of the Menu */
     margin-bottom: 0; /* Margin from the top div is 0 */
     margin-top: 0; /* Margin from the top div is 0 */
     padding: 0;
     display: flex; /* Add flexbox to list */
   }
   
   /* CSS for Menu Edges*/
   #Menu li {
     border-right: 1px solid rgb(104, 99, 99); /* Left border line of 1 px separating blocks. */
     border-left: 1px solid rgb(104, 99, 99); /* Right border line of 1 px separating blocks. */
     flex: 1  /* With flexbox we don't need float anymore */
   
   }
   
   /* CSS for Menu Tabs */
   #Menu li a {
     display: block; /* Turns it into a block display */
     color: rgb(187, 180, 180); /* Background colour of Text */
     text-align: center; /* Aligns text to the middle of the block */ 
     padding: 16px; /* Remove large horizontal padding */
     text-decoration: none; /* Makes sure there are no underlines */
   }

<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>