Jquery 移动输入覆盖

Question

最初我不知道 jquery mobile 会重新格式化输入，但我发现 .ui-input-text 是 jquery mobile 的默认设置。然后我用 .panel-input 将我的输入包装在他们自己的 div 中。我能够用 inline-block 覆盖默认的 display:block 并改变宽度。但是，出于某种原因，我不知道如何覆盖边距。

我正在尝试在输入之间添加边距。有人看到我做错了什么吗？

顺便说一句，我没有使用 jquery mobile 的 css 文件。

.proposal-input, .proposal-text {
	border: 1px solid #858585;
	background: #333333;
	font-size: 1.4rem;
	padding: 15px 8px;
	color: #858585;
	outline: none;
	font-family: Helvetica;
	margin: 1.5% 2% 2.5% 2%; !important
}
.panel-input {
	display: inline-block;
	width: 44%; !important
	margin: 1.5% 2% 2.5% 2%; !important
}
.ui-input-text, .proposal-input {
	width: 100%;
}
.proposal-text {
	width: 94%;
	display: block;
	height: 6em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="panel-input"><input type="text" class="proposal-input" placeholder="Name *"></div>
<div class="panel-input"><input type="text" class="proposal-input" placeholder="Email *"></div>
<div class="panel-input"><input type="text" class="proposal-input" placeholder="Phone *"></div>
<div class="panel-input"><input type="text" class="proposal-input" placeholder="Location *"></div>

Answer 1

我会使用 box-sizing 作为输入。您可能需要减小 div 的 width 以使更改明显。像这样:

box-sizing: border-box;对于这个选择器:.proposal-input, .proposal-text

fiddle :https://jsfiddle.net/kby203Ln/1/

编辑:

改变的是:

.proposal-input, .proposal-text {
	border: 1px solid #858585;
	background: #333333;
	font-size: 1.4rem;
	padding: 15px 8px;
	color: #858585;
	outline: none;
	font-family: Helvetica;
	margin: 1.5% 2% 2.5% 2%; !important;
  box-sizing: border-box;/* added this*/
}

.panel-input {
	display: inline-block;
	width: 40%; !important; /* changed width from 44 to 40 */
	margin: 1.5% 2% 2.5% 2%; !important;
}