html - 元素堆叠而不是与内联 block 对齐

Question

目标
在 480 和 767 像素之间的屏幕上让按钮水平排列。像这样。

背景
它们大部分时间都正确排列(如上图所示)，但在 iPhone 上，当您从纵向旋转到移动时，有时按钮会堆叠。此外，当您将浏览器窗口的大小从小于 480 调整为更大时。

我希望他们每人占据屏幕的一半。但是由于填充，我遇到了问题。所以我通过使按钮 width: 46% 来解决。

当前状态
我在这个测试站点上有导航 http://bruxzir.jgallardo.me/

下面是与按钮相关的代码

元

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

HTML

<div class="main-buttons">
  <a href="/dentist/authorized-bruxzir-labs/" class="main-button">
    <span class="button-highlight">Find an</span>
    <br>Authorized Lab
  </a>

  <a href="/lab/become-authorized-bruxzir-lab.aspx" class="main-button become">
    <span class="button-highlight">Become an</span>
    <br>Authorized Lab
  </a>
</div>

CSS

.main-buttons {
  float: right;
  margin: 20px 10px 0 0;
}

.main-buttons a {
  background-color: #000000;
  border-left: 10px #BA222B solid;
  color: #fff;
  display:block;
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 10px;
  padding: 10px 0 10px 20px;
  text-decoration: none;
  width: 270px;
}

@media only screen and (max-width: 479px) {
  .main-buttons {
    float: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    bottom: 0px;
    width: 100%;
  }

  .main-buttons a {
    border: none;
    font-size: 20px;
    line-height: 25px;
    margin: 0px;
    padding: 5px 0 5px 10px;
    width: 100%;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .main-buttons {
    float: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 0px;
    width: 100%;
  }

  .main-buttons a {
    border: none;
    display:inline-block;
    font-size: 20px;
    line-height: 20px;
    margin: 0px;
    padding: 5px 0 5px 10px;
    width: 47%;
  }

  .become {
    float: right;
  }
}

Answer 1

对于 .main-buttons a 将其设置为 float : right;。

我相信这应该对你有用。

它们堆叠的原因是因为您拥有的边距和填充。

如果你想让按钮占据屏幕的一半，而不是试图找出某些边距和填充，只需将容器的宽度设置为 50% 然后你就可以搞砸了填充和定位。