放置float属性后按钮不起作用

Question

I have a media query where my two buttons will go on opposite sides of the screen, so clearly I had to use the float property on the buttons.

At first I just put a left float on one button but that didn't centered the two buttons, so I went ahead and put a right float on the other. After doing so, the buttons didn't work.

I made a fiddle, and everything is in there... could someone help me?

Basically, what I want is that the two buttons are side by side and centered in the media query.

@media screen and (min-width: 600px) and (max-width: 1199px){
  #mainButtons{
    display: inline;
    button{
      width: 45%;
    }
  }

  #oneButton{
    margin-right: 10px !important;
    .random-button{
      float: left;
    }
  }

 #twoButton{
   .picky-eater-btn{
     float: right;
     margin-top: 0;
   }
 }
}

Fiddle: here

Answer 1

At first glance, I notice that your CSS syntax is invalid. You cannot put element styles inside another element style definition.

for example, you have button defined inside of #mainButtons . That is invalid.

Answer 2

Is this basically the result you want?

Fiddle - Fiddle link!

HTML

<div id="mainButtons">
    <button class="btn btn-hg btn-warning one-button">BUTTON 1</button>
    <button class="btn btn-hg btn-danger two-button">BUTTON 2</button>
</div>

CSS

#mainButtons {
    min-width: 200px;
    max-width: 800px;
    margin: 0 auto;
}

#mainButtons button {
    width: 46%;
    float: left;
    margin: 0 2%;
}

.one-button {
    color: #FFFFFF;
    text-align: center;
    border-radius: 10px;
    height: 150px;
    box-shadow: 0px 10px #FF841A;
}
.two-button {
    font-family:'Lato', sans-serif;
    height:150px;
    box-shadow: 0px 10px #D70A00;
}
.btn:active {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
}

Answer 3

There were a lot of issues with your code. I will try to explain all of them to you, but first, here is a working fiddle:

JSFiddle

---

1. You cannot have nested CSS elements:

This is invalid:

#buttons{
    button{
        width: 100%;
    }
}

Instead, use concatenation:

#buttons button{
    width: 100%;
}

---

2. Floating width:100% elements is essentially useless in your case

You were attempting to float #oneButton and #twoButton , which is correct, but as divs, which are block elements, they innately have 100% width, so setting the width of the buttons inside them to 45% will still make them appear on different lines.

#oneButton, #twoButton
{
    width: 45%;
}

.one-button, .two-button
{
    width: 100%
}

---

3. Apply margins to the parent divs, not the buttons

Since you want the floated divs to appear on the same line, you should apply all CSS affecting margin, width, padding, etc. to the parent, not the child.

---

Hopefully this works for you. Remember that clean CSS is good CSS and it makes it easier for us to help you.

Once again, here is the fiddle.