Question 43553 in Html Question posted in
Some basic documentation can be found here.

how to make a ul li element fit div element without gaps – Html

i am new to css and html. so my ul li dropdown menu and log in both have background, red and blue boxes that have gaps within the div and i want them to fit it with the height of the div.

here is the code:

@keyframes animation {
  from   {opacity: 0%;}
  to    {opacity: 100%;}
}

.maindiv{
  width: 100%;
  height: 30px;
  background-color: black;

}
.ul1{
    height: 30px;
    margin: 0px;
    padding: 0px;
    text-align: right;
    list-style-type: none;
    color: white;
}
.ul1 a{

    color: white;
    text-decoration: none;
}
body{
    animation-name: animation;
  animation-duration: 2s;
    font-family: Arial, sans-serif;
}
li{
    display: inline;
    width: 100%;
    height: 100%;
    margin-right: 100px;
    text-align: left;
    }

.dropdown{
    display: none;
    position: absolute;
    margin-left: 70%;
    color: black;
}

.more:hover .dropdown{
    display: block;
    
}

#table{
    height: 100px;
    width: 200px;
    margin-top: 10px;
    box-shadow: 0px 5px 5px gray;
}
.more{
    width: 200px;

    background-color: blue;
}

.more td:hover{
    border: 1px solid black;
}

#li5{
    font-weight: bold;
    background-color: red;
    margin-left: 20px;
}
h1{
    font-style: italic;
    color: blue;
    font-size: 50px;
    text-shadow: 0px 12px yellowgreen, 0px 19px red;
}
<h1>Retro Logo</h1>
<div class="maindiv">
<ul class="ul1">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="more"><a href="#">More +</a>
    <div class="dropdown"><table id="table">
    <tr><td>option 1</td>
    <td>option 2</td>
    </tr>
    <tr><td> option 3</td>
    <td>option 4</td>
    </tr>
    </table></div></li>
<li id="li5"><a href="#">Log in</a></li>
</ul>
</div>

i tried everything like changing margin and padding to 0 but nothing worked. thanks in advance :))

here is what i want to achieve

Tags:

4

Answers


  1. 0

    In the CSS, try to delete the height property from .maindiv and .ul1.

    Login or Signup to reply.
  2. 0

    If your question is to list your drop downs evenly:

    1. you can set your li’s to display:block. This will make your li’s to accept height and width property. Display:inline will set any element to not respect the height and width property and any changes you wish to make to a respective element. Drop downs should not be inline since they should follow the vertical axis.

    If your question is to set the space between your container divs then you should:

    1. Set the body element or all the div element to have set unit of top or bottom margins. Preferably in rems.

    Hope this helps!

    Login or Signup to reply.
  3. 0

    I changed your li rule to

    li{
    display: inline;
    height: 100%;
    margin-right: 10%;
    text-align: left;
    }

    And it works. See:

    @keyframes animation {
  from   {opacity: 0%;}
  to    {opacity: 100%;}
}

.maindiv{
  width: 100%;
  height: 30px;
  background-color: black;

}
.ul1{
    height: 30px;
    margin: 0px;
    padding: 0px;
    text-align: right;
    list-style-type: none;
    color: white;
}
.ul1 a{

    color: white;
    text-decoration: none;
}
body{
    animation-name: animation;
  animation-duration: 2s;
    font-family: Arial, sans-serif;
}
li{
    display: inline;
    height: 100%;
    margin-right: 10%;
    text-align: left;
    }

.dropdown{
    display: none;
    position: absolute;
    margin-left: 70%;
    color: black;
}

.more:hover .dropdown{
    display: block;
    
}

#table{
    height: 100px;
    width: 200px;
    margin-top: 10px;
    box-shadow: 0px 5px 5px gray;
}
.more{
    width: 200px;

    background-color: blue;
}

.more td:hover{
    border: 1px solid black;
}

#li5{
    font-weight: bold;
    background-color: red;
    margin-left: 20px;
}
h1{
    font-style: italic;
    color: blue;
    font-size: 50px;
    text-shadow: 0px 12px yellowgreen, 0px 19px red;
}
    <h1>Retro Logo</h1>
<div class="maindiv">
<ul class="ul1">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="more"><a href="#">More +</a>
    <div class="dropdown"><table id="table">
    <tr><td>option 1</td>
    <td>option 2</td>
    </tr>
    <tr><td> option 3</td>
    <td>option 4</td>
    </tr>
    </table></div></li>
<li id="li5"><a href="#">Log&nbsp;in</a></li>
</ul>
</div>
    Login or Signup to reply.
  4. 0

    I know you want a drop down button, so dont get it too complicated you can use this as a drop down one, basically these are more modern samples instead of yours not so modern ones!

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
</body>
</html>

    now if you want the full navigation bar i do recommend you to use this!

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div> 
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search