放置浮动属性后按钮不起作用

Question

我有一个媒体查询，我的两个按钮将位于屏幕的两侧，所以显然我必须使用按钮上的float属性。

起初我只是在一个按钮上放了一个左浮动但是没有将两个按钮对中，所以我继续前进并在另一个按钮上放置一个右浮动。这样做后，按钮不起作用。

我做了一个小提琴，一切都在那里......有人可以帮助我吗？

基本上，我想要的是这两个按钮是并排的，并且以媒体查询为中心。

@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;
   }
 }
}

小提琴：here

Answer 1

乍一看，我注意到你的CSS语法无效。您不能将元素样式放在另一个元素样式定义中。

例如，您在button内定义了#mainButtons。那是无效的。

Answer 2

这基本上是你想要的结果吗？

小提琴 - 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

您的代码存在很多问题。我会尝试向你解释所有这些，但首先，这是一个工作小提琴：

JSFiddle

---

1。您不能拥有嵌套的CSS元素：

这是无效的：

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

相反，请使用连接：

#buttons button{
    width: 100%;
}

---

2。在您的情况下，浮动width:100%元素基本上是无用的

你试图浮动#oneButton和#twoButton，这是正确的，但是作为块元素的div，它们天生具有100％的宽度，因此将它们内部的按钮宽度设置为45％仍会使它们出现在不同的行上。

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

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

---

3。将边距应用于父div，而不是按钮

由于您希望浮动的div显示在同一行上，您应该将影响边距，宽度，填充等的所有CSS应用于父级，而不是子级。

---

希望这适合你。请记住，干净的CSS是很好的CSS，它使我们更容易为您提供帮助。

Once again, here is the fiddle.