我可以在不使用元素的情况下提交表单<input>，还是元素可以<input>包含两个<p>元素？

Question

在<form>内部，我想要一个type=submit的input，它有一个固定的width，比如150px，并提交这个<form>。在这个按钮中，我想在最左边有文本，在最右边有>符号，就像这样：

 ---------------------------------
| Let's go                      > |
 ---------------------------------

最初，我将input封装在div中，然后封装在CSS中，使用:after伪选择器在input之后添加>符号（并给它一个float:right）但问题是，如果用户单击div中除input文本之外的任何位置，则不会提交form

我真的很想有两个span（一个用于文本，一个用于>）或两个p，但表单必须提交，所以必须使用input，而input不能有span或p等。

我该怎么办？

Answer 1

您可以使用<button type="submit></button>并使其成为width: 100%:

.btn-wide {
  width: 100%;
  text-align: left;
  padding: 10px;
  font-size: 20px;
}
.btn-wide .icon {
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<br><br><br>
<button type="submit" class="btn btn-wide">
  <span class="label">Save</span>
  <i class="icon fa fa-angle-right"></i>
</button>

Answer 2

将其添加到您的div 中

<div id="submit" onclick="submitForm()">

Javascript

function submitForm()
 {
      document.getElementById('YourFormId').submit();
 }

Answer 3

像这个

#target:after{
  content:'>'
}

<button id='target' type='submit'>
Let's Go&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
</button>

由于你想要固定宽度，这是另一个涉及填充的解决方案

#target:after{
  content:'>'
}
#target span{
  padding-right:300px;
}

<button id='target' type='submit'>
<span>Let's Go</span>
</button>