'How can i make the dropdown the same size as button (width)

I have a dropdown and a button, how would I go on about making the dropdown the same size as the button?

:root {
  --navbarbgc: rgb(83, 79, 79);
  --dropwidth: 100px;
}

body {
  margin: 0;
}

ul {
  list-style: none;
}

.navbar {
  background-color: var(--navbarbgc);
}

.navbar>ul>li>button {
  width: var(--dropwidth);
}

#navdrop {
  position: absolute;
  background-color: var(--navbarbgc);
  justify-content: center;
}
<div class="navbar">
  <ul>
    <li><button id="navdropbutton">Dropdown</button>
      <ul id="navdrop">
        <li>Option1</li>
        <li>Option2</li>
        <li>Option3</li>
        <li>Option4</li>
        <li>Option5</li>
        <li>Option6</li>
        <li>Option7</li>
      </ul>
    </li>
  </ul>
</div>

I tried making a variable and then putting the same size to them but that didn't work.

htmlcss


Solution 1:[1]

What I did

Added class button-li to the li element which has button

And added this css

#navdrop {
  position: absolute;
  background-color: var(--navbarbgc);
  justify-content: center;
  padding: 0;
  width: 100%;
}

.button-li {
  display: inline-block;
  position: relative;
}

Fiddle https://jsfiddle.net/vsm15jok/

Solution 2:[2]

Here I gave button width of 100px, removed padding from #navdrop and gave width of 100px to #navdrop (same as button) then I just centered the text using text-align. you should NOT be using justify-content because it does nothing for you right now. use justify-content with Flex

#navdrop {
    position: absolute;
    background-color: var(--navbarbgc);
    width: 100px;
    padding-left: 0px;
    text-align: center;
}
#navdropbutton {
  width: 100px;  
}

Fiddle: https://jsfiddle.net/10c2axds/1/

Solution 3:[3]

you can add w-100 to the dropdown-menu class part

<div class="dropdown" style="margin-right: 5px;width: 23%;">
  <button class="btn btn-block btn-warning dropdown-toggle btn-lg" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    OPERAZIONI
  </button>
  <div class="dropdown-menu w-100" aria-labelledby="dropdownMenu2">
<button type="button" class=" dropdown-item border border-warning rounded">
    <a class="bottonePreferenze" data-link="/pg/ac_Operazione" href="/pg/ac_Operazione">
          <i class="fa fa-cube fa-2x"></i>
    <span>ANAGRAFICA OPERAZIONI</span>
    </a></button>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kenny
Solution 2 Sulkhani
Solution 3 Francesco Meloni

Related Questions