将 `<form>` 添加到按钮会更改其位置答案

【问题标题】：adding `<form>` to button changes its position将 `<form>` 添加到按钮会更改其位置
【发布时间】：2020-10-29 20:24:36
【问题描述】：

我有两个按钮

一个是width: 70;左对齐，另一个是width: 30;右对齐。

问题：将<form> 属性添加到左按钮 时，它会在另一个按钮下方并对齐右

<div id="button">
        <button class="upperright"> 
        this is button right
        </button>

    <form target="_blank" action="https://ticks.co.il/">
        <button type="submit" class="upperleft">  
        this is button left
        </button>
    </form>
</div>

我想要的是在添加 <form> 后保持按钮与另一个按钮左对齐。

我的CSS：

.upperright, .upperleft{
      background-color: #A7A774;
      color: white;
      font-family: peninim;
      padding: 3px 30px 3px 35px;
      margin-left: -5px;
      font-size: 15px;
      cursor: pointer;
}
  .upperleft{
      width: 70%;
}
  .upperright{
      width: 30%;
}

【问题讨论】：

标签： html css forms button

【解决方案1】：

如果我正确理解您想要什么，您可以在右上角添加浮动右侧和 100% 的高度，这应该可以解决您的问题。

     .upperright{
      width: 30%;
      height: 100%;
      float: right;
      }

你的 div 上也缺少一个结束标签

【讨论】：

我向右添加了浮动，它解决了我的问题。谢谢你！我必须包括高度：100% 吗？

【解决方案2】：

<div id="container">
    <div class="float-left" style="float: left;">
        <form target="_blank" action="https://ticks.co.il/">
            <button type="submit" class="upperleft">this is button left</button>
        </form>
    </div>
    <div class="float-right" style="float: right;">
        <button class="upperright">this is button right</button>
    </div>
</div>

试试这个，如果我理解你在寻找什么是正确的。尝试在带有按钮的 div 中使用 float。

【讨论】：