Question

我试图将一个按钮放在标题下，但是该按钮被推到了侧面。我认为这与绝对位置有关，但我不太确定。我还想使按钮像文本一样响应，以便在不同的窗口中改变按钮的大小。

HTML：

    body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      display: flex;
      justify-content: left; /* align horizontal */
      align-items: center; /* align vertical */
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-align: center;
        text-decoration: none;
        font-size: 1w;
    }

<div class="splash">
        <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
    </div>

https://codepen.io/anon/pen/qQraNB

感谢您的帮助，谢谢！

Answer 1

在标题上设置了padding-bottom: 3.5em;，将标题向上推，如果您将填充底部移开，则按钮应在两个按钮上垂直对齐。

Answer 2

您使用display:flex是什么使它们位于同一行，因此：

1。从display:flex删除.splash

2。font-size: 1w;中的.button {}无效，将其更改为font-size: 2.5vw;

您可以使用margin-left: 4.5em;进行按钮

See code in fiddle:

   body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-decoration: none;
        font-size: 2.5vw;
        margin-left: 4.5em;
    }

<div class="splash">
     <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
</div>

如何在我的标题下对齐按钮，并使按钮具有响应性？

2 个答案: