techinplanet staffAsked By: Anonymous
I’m trying to make a bunch of buttons, like this
Here is the code
_x000D_
_x000D_
<style>
.button-container {
width: 320px;
background: #fff;
overflow-y: hidden;
}
.btn {
width: 150px;
background: #fff;
display: inline-block;
padding: 36px 36px;
border-style: solid;
border-width: medium;
border-color: #A7D1E8;
}
.btn:hover {
background: #eee;
}
</style>_x000D_
<body>
<div class="button-container">
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
</div>
</body>_x000D_
_x000D_
x000D
I have 2 questions:
- It seems the width property in
.btndoesn’t work, the width of the container is 320px and the width of the button is 150px, there should be 2 buttons in a row but the result is not as expected, why is that? - How do I put some space between buttons vertically?
Solution
Answered By: Anonymous
Style tag in the style side of your snippet is making your button container class not work and for your space use margin-bottom
_x000D_
_x000D_
.button-container {
width: 320px;
background: #fff;
overflow-y: hidden;
}
.btn {
width: 150px;
background: #fff;
display: inline-block;
padding: 36px 36px;
border-style: solid;
border-width: medium;
border-color: #A7D1E8;
margin-bottom: 10px;
}
.btn:hover {
background: #eee;
}_x000D_
<div class="button-container">
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
<button class="btn">Fight Here</button>
</div>_x000D_
_x000D_
x000D
