Question

我在表单末尾有一个提交按钮。我发现即使在按钮外面点击按钮的整行div也会按下按钮。

css中是否有任何选项？如果您愿意，我可以提供代码。谢谢提前

HTML：

<div id="submit">
            <div id="block">
            <button type="submit"  id="submit">Create</button>
            </div>
          </div>

的CSS：

button.submit-button {
  font-size: 14px;
  padding: 1px 2px;
  color: #fff;
  margin: 0px 70px;
  margin-top: 5px;
  border-radius: 1px;
}

Answer 1

你可能有一个尚未结束的href元素，或者你可能在div周围有href元素而不是按钮。用代码回答会更容易，但你的按钮看起来应该是这样的;

<a href="Your Link"><button>Your Button</button></a>

Answer 2

我猜你已将按钮保留在anchor tag内，其中display:block类似于来自代码段的Button1。

将其设为display:inline或display:inline-block

＆＃13;

<div style="text-align:center">
  <a href="#" style="display:block; background-color: yellow;">
    <button>
      button1
    </button>
  </a>
  <div>
  <a href="#" style="display:inline-block; background-color: yellow;">
    <button>
      button2
    </button>
  </a>
  </div>
  <button>
    button3
  </button>
</div>

＆＃13;

更新：

您的div和button都具有相同的id，id="submit"。可能是因为这个原因。更改其中一个id's

Answer 3

我在JSFiddle中做了一个例子。

去查看它并尝试从display删除css属性：#block或将其更改为inline，看看会发生什么。

蓝色区域的大小由按钮上的margin和padding确定。

在这个简单的example中，您要查找的是display: inline-block;，您可以看到按钮保持正常大小，而div #submit默认使用整行。

我还将按钮的选择器更改为id="button"

点击此网站了解更多信息：w3s Display和w3s Selectors

Answer 4

你在div和button标签中有相同的id，你应该先改变它。然后你的CSS就是

 #button{
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}

我希望它会对你有所帮助。

即使在按钮外，也可以看到按钮可点击区域

4 个答案: