Question

嘿，我想将这2个按钮彼此相邻放置1个保持在另一个下方。我怎样才能解决这个问题？ CSS：

a.button1 {
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid white;
  /* margin:0 0.3em 0.3em 0; */
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
  margin-left: 1360px;
  width: 5%
}

a.button1:hover {
  color: #000000;
  background-color: #FFFFFF;
}

@media all and (max-width:30em) {
  a.button1 {
    display: block;
    margin: 0.4em auto;
  }
}

<div class="modal-headertje">
  <span class="close" style="color:white;" id="kruisje">&times;</span>
  <center>
    <h2 style="color:black;">Specificaties</h2>
  </center>
  <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
  <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
</div>

Answer 1

在您使用的CSS中内联使用。封锁对您没有帮助

.inline {
   display:inline-block;
   margin-right:5px;
}

Answer 2

在HTML，CSS下面进行更改，您就可以完成...

<div class="button-par">
    <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
    <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
</div>

a.button1 {
    border: 1px solid #000;
    margin: 10px;
    color: #000;
    width: max-content;
}

<< / p>

.button-par {
  float:right;
  width: max-content;
}
a.button1 {
  display: inline-block;
  padding: 0.35em 1.2em;
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
  width: 5%
  border: 1px solid #000;
  margin: 10px;
  color: #000;
  width: max-content;
}

a.button1:hover {
  color: #000000;
  background-color: #FFFFFF;
}

@media all and (max-width:30em) {
  a.button1 {
    display: block;
    margin: 0.4em auto;
  }
}

<div class="modal-headertje">
  <span class="close" style="color:white;" id="kruisje">&times;</span>
  <center>
    <h2 style="color:black;">Specificaties</h2>
  </center>
  <div class="button-par">
  <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
  <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
  </div>
</div>

Answer 3

是由您的margin-left: 1360px引起的问题，因为它同时应用于两个按钮并按了两个按钮。

您可以执行float:right使它们与右边对齐，或者更好的是，将它们包裹在div中并将其浮动到右边。

a.button1 {
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid white;
  /* margin:0 0.3em 0.3em 0; */
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
  margin-left: 10px;
  float:right;
  width: 5%
}

或使用div：

<div class="modal-headertje">
  <span class="close" style="color:white;" id="kruisje">&times;</span>
  <center>
    <h2 style="color:black;">Specificaties</h2>
  </center>
  <div class="float-right">
      <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
      <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
  </div>
</div>

.float-right {
  float:right;
}
a.button1 {
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid white;
  /* margin:0 0.3em 0.3em 0; */
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
  margin-left: 10px;
  width: 5%
}

Answer 4

对margin-left进行硬编码以使按钮向右对齐是不好的，因为每个设备的宽度都可能不同，因此可能导致其他设备的水平滚动问题。

最好将text-align与内联元素一起使用，而不要使用float。

您需要执行以下操作来解决您的问题：

    <div class="modal-headertje">
        <span class="close" style="color:white;" id="kruisje">&times;</span>
        <center>
            <h2 style="color:black;">Specificaties</h2>
        </center>
        <div style="text-align: right">
            <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
            <a style="cursor:pointer; text-align:center;" class="button1" style="width:5%; ">Button</a>
        </div>
    </div>

a.button1 {
  display: inline-block;
  padding: 0.35em 1.2em;
  border: 0.1em solid white;
  /* margin:0 0.3em 0.3em 0; */
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-align: center;
  transition: all 0.2s;
  width: 5%
}

如何将这些按钮彼此相邻？

4 个答案: