0

can anyone help me been trying to create a custom navigation that displays 2 buttons side-by-side no matter what the screen size and I use this css code:

display: inline-block;
width: 50%;
padding: 10px;

But every time I use this, the other buttons seems to go to a new line.

I want it to look like this

no matter what the screen size is. 2 buttons side-by-side that each one would take up half the screen.

Paolo07
  • 21
  • 1
  • 5

1 Answers1

1

div {
    font-size: 0;
}
button {
    font-size: 1rem;
    display: inline-block;
    width: calc(50% - 20px);
    padding: 10px;
    margin: 10px;
}
<div>
    <button>button1</button>
    <button>button2</button>
</div>

or

div {
    display: flex;
}
button {
    flex-grow: 1;
    margin: 10px;
    width: 50%;
    padding: 10px;
}
<div>
    <button>button1</button>
    <button>button2</button>
</div>
多一点点爱
  • 1,333
  • 6
  • 12
  • Hi thanks for this but is there a way it would still have a space between the buttons? Also what does flex-grow do? I'm still learning how to code HTML and CSS – Paolo07 Jun 10 '20 at 01:27
  • @Paolo07 `flex-grow` can be left out after the width is set, Button gap add `margin` is good, but I still recommend you learn the basics from HTML and CSS. The above code has been updated. – 多一点点爱 Jun 10 '20 at 01:42
  • @Paolo07 After the basics of HTML and CSS are learned, common styling problems can be solved. – 多一点点爱 Jun 10 '20 at 01:48