注意:由于我一直在尝试从wordpress环境中提取代码Salient主题,我无法以最简单的形式重现该问题,我可能最终回答我自己的问题,但请注意我感谢任何反馈一路走来,我希望这个问题能为社区提供信息。
我到目前为止的问题描述如下:
我试图更好地控制我的内容在屏幕上显示的方式,似乎有些东西我不了解CSS。我已经尝试使用“box-sizing:border box”属性,其中包括填充和边框计算元素的总宽度。我添加了链接来显示输入和span元素的状态
"Chrome Devtool" Input element highlights
"Chrome Devtool" Span element content area
我认为盒子大小不起作用,因为问题是与保证金相关的问题。我最好的猜测是“margin-left”属性影响了总内容区域,将内容推送到span元素之外。但是我希望input元素包含在span元素中
Lucien Dubois感谢HTML和CSS的加入
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.contact-fields input, textarea{
margin-left: 12px;
}
.wpcf7-form-control-wrap {
display: block !important;
position: relative;
}
div, span, h5, p {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin-right: 0;
border: 0
}
h5
{
font-family:Raleway;
line-height:16px;
margin-bottom: 7px;
color:#444;
letter-spacing:0px;
font-weight:600;
}
.form-label {
clear: both;
font-size: 20px
}
h5 {
vertical-align: baseline;
font-style: inherit;
outline: 0;
padding: 0;
margin-top: 0;
margin-right: 0;
margin-left: 0;
border:0
}
.first-name, .last-name {
display: inline-block;
width: 40%;
margin-right: 9px;
}
.first-name input, .last-name input {
width: 62%;
}
input {
margin-bottom: 20px;
margin-top: 5px;
}
<div class="contact-fields">
<div class="name-section">
<div class="first-name">
<h5 class="form-label"> First Name:</h5>
<p>
<span class="wpcf7-form-control-wrap fname">
<input type="text"
name="fname"
value=""
size="40"
maxlength="50"
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field"
aria-required="true"
aria-invalid="false">
</span>
</p>
</div>
<div class="last-name">
<h5 class="form-label"> Surname:</h5>
<p>
<span class="wpcf7-form-control-wrap lname">
<input type="text"
name="lname"
value=""
size="40"
maxlength="50"
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-field"
aria-required="true"
aria-invalid="false"></span>
</p>
</div>
</div>
</div>
您可以尝试为输入字段添加最小和最大属性
input {
min-width: 100%;
max-width: 100%;
}