Question

我正在尝试在这两个按钮之间放置两个

尝试了style="margin-right:，但它按下了按钮，而不是与其他按钮保持一致

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">


  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <p style="text-align: left;"><a class="global-btn" style="margin-top: 0;" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Click Here to get Started Now&lt;&lt;&lt;</a></p>
  </div>
  </div>

  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <p style="text-align: right;"><a class="global-btn" style="margin-top: 0;" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Schedule call and LEARN MORE &lt;&lt;&lt;</a></p>
  </div>
  </div>
</div>

</body>
</html>

Answer 1

您可以使用相对和绝对定位来分别将按钮向左和向右对齐，并以w3-container作为主要元素来作为定位的基础。

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container" style='width: 100%; position: relative;'>

  <div class="w3-show-inline-block" style="left: 0; position: absolute;">
  <div class="w3-bar">
    <p><a class="global-btn" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Click Here to get Started Now&lt;&lt;&lt;</a></p>
  </div>
  </div>

  <div class="w3-show-inline-block" style="right: 0; position: absolute;">
  <div class="w3-bar">
    <p><a class="global-btn" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Schedule call and LEARN MORE &lt;&lt;&lt;</a></p>
  </div>
  </div>
</div>

</body>
</html>

如果您可以支持的话，另一个选择是使用flexbox。在这种情况下，您可以插入一个额外的“ spacer”元素，以占用其兄弟姐妹所允许的最大空间。

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container" style='width: 100%; display: flex;'>

  <div class="w3-show-inline-block" style="flex: 0; white-space: nowrap;">
  <div class="w3-bar">
    <p><a class="global-btn" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Click Here to get Started Now&lt;&lt;&lt;</a></p>
  </div>
  </div>

  <div class="spacer" style="flex: 1;"></div>

  <div class="w3-show-inline-block" style="flex: 0; white-space: nowrap;">
  <div class="w3-bar">
    <p><a class="global-btn" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Schedule call and LEARN MORE &lt;&lt;&lt;</a></p>
  </div>
  </div>
</div>

</body>
</html>

Answer 2

您可以简单地添加一个Padding-Right，以便在想要的字段之间留一个空格。

<html>
    <head>    
        <title>W3.CSS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <div class="w3-container">          
            <div class="w3-show-inline-block">
                <div class="w3-bar" style="padding-right: 200px;">
                    <p style="text-align: left;"><a class="global-btn" style="margin-top: 0;" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Click Here to get Started Now&lt;&lt;&lt;</a></p>
                </div>
            </div>
            <div class="w3-show-inline-block">
                <div class="w3-bar">
                    <p style="text-align: right;"><a class="global-btn" style="margin-top: 0;" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Schedule call and LEARN MORE &lt;&lt;&lt;</a></p>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 3

我已经复制了您的代码（如下），并对其进行了修改。

我已经为（focus）div添加了颜色，以显示容器以及它们在屏幕上的显示位置。我所做的唯一真实的事情是，在class =“ w3-bar”的第二个div中添加了float：right。

我还向w3-container div添加了width：900px，以控制容器在屏幕上的水平距离。您可以更改宽度以查看结果。

注意：如果将其设置为“自动”，它将受其父对象的宽度控制。

<div class="w3-container" style="background-color: red;width:900px;">


  <div class="w3-show-inline-block" style="background-color:yellow;">
      <div class="w3-bar">
        <p style="text-align: left;"><a class="global-btn" style="margin-top: 0;" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Click Here to get Started Now&lt;&lt;&lt;</a></p>
      </div>
  </div>

  <div class="w3-show-inline-block" style="background-color: green;float:right;">
      <div class="w3-bar">
        <p style="text-align: right;"><a class="global-btn" style="margin-top: 0;" href="https://queencitylocal.com/contact/">&gt;&gt;&gt;Schedule call and LEARN MORE &lt;&lt;&lt;</a></p>
  </div>
  </div>
</div>

如何间隔两个按钮

3 个答案: