Question

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

objective

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

enter image description here

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

的测试网站上有导航

以下是与按钮相关的代码

元

<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%，然后您就可以使用填充和定位

Answer 2

我做了这个修改过的JSFiddle：

http://jsfiddle.net/nErn6/

以下是相关的CSS更改：

.main-buttons a {
    ...
    display: block;
    ...
    width: 48%;
    float: left;
    box-sizing: border-box;
    margin-right: 4%;
}
.main-buttons a:last-child {
    margin-right: 0;
}

用display: inline-block

display: block

使用float: left处理水平定位
使用box-sizing: border-box来考虑填充
使用基于百分比的边距和大小调整

希望这有帮助。

Answer 3

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .main-buttons a {
    border: none;
    float: left; /* remove display: inline-block; */
    font-size: 20px;
    line-height: 20px;
    margin: 0px;
    padding: 5px 0 5px 10px;
    width: 47%;
  }
  .main-buttons a.become {
    float: right;
  }
}

这应该解决你的问题，我认为它发生cuz内联块给出空格。你可以阅读它here。

元素堆叠而不是与内联块排列

3 个答案: