首先,抱歉我的英语不好。
我想显示字段集输入文字和输入提交内联。 该按钮应具有固定宽度,基于字体大小,文本字段应填充同一行上的其余空间。
我有以下字段集和CSS:
.example {
background-color: #ffffff;
padding: 10px 0px 0px 0px;
}
.example fieldset {
font-size: 1.05em;
border: 0px;
background-color: #c3dedb;
padding: 10px;
}
.example fieldset input[type="text"] {
padding: 8px 10px 8px 10px;
margin: 0px 5px 0px 0px;
font-size: inherit;
border: 0px;
}
.example fieldset input[type="submit"] {
background-color: #1a7a70;
color: #ffffff;
border: 0px;
font-size: inherit;
border-radius: 3px;
padding: 8px 10px 8px 10px;
}
.example fieldset input[type="submit"]:hover {
background-color: #187269;
}
<div class="example">
<form>
<fieldset>
<input type="text" name="p" value="0,00">
<input type="submit" value="Nu bieden">
</fieldset>
</form>
</div>
使用此代码,会发生以下宽度更大的屏幕:
以下小屏幕:
我的问题
即使屏幕较小,如何获取输入字段和按钮始终内联?如何让输入字段填充同一行的其余空间?我试着给它100%的宽度,但是按钮跳到下一行。
答案 0 :(得分:0)
您可以避免将文字换行设置white-space
设置为pre
或nowrap
:
.example fieldset {
white-space: nowrap;
}
.example {
background-color: #ffffff;
padding: 10px 0px 0px 0px;
}
.example fieldset {
font-size: 1.05em;
border: 0px;
background-color: #c3dedb;
padding: 10px;
white-space: nowrap;
}
.example fieldset input[type="text"] {
padding: 8px 10px 8px 10px;
margin: 0px 5px 0px 0px;
font-size: inherit;
border: 0px;
}
.example fieldset input[type="submit"] {
background-color: #1a7a70;
color: #ffffff;
border: 0px;
font-size: inherit;
border-radius: 3px;
padding: 8px 10px 8px 10px;
}
.example fieldset input[type="submit"]:hover {
background-color: #187269;
}
&#13;
<div class="example">
<form>
<fieldset>
<input type="text" name="p" value="0">
<input type="submit" value="Go">
</fieldset>
</form>
</div>
&#13;
要使其填充所有剩余空间,您可以添加包装并重新排序输入:
<input type="submit" value="Go">
<div><input type="text" name="p" value="0"></div>
使用这些样式:
.example fieldset div {
overflow: hidden;
}
.example fieldset input[type="text"] {
width: 100%;
}
.example fieldset input[type="submit"] {
float: right;
}
.example {
background-color: #ffffff;
padding: 10px 0px 0px 0px;
}
.example fieldset {
font-size: 1.05em;
border: 0px;
background-color: #c3dedb;
padding: 10px;
white-space: nowrap;
}
.example fieldset div {
overflow: hidden;
}
.example fieldset input[type="text"] {
padding: 8px 10px 8px 10px;
margin: 0px 5px 0px 0px;
font-size: inherit;
border: 0px;
width: 100%;
}
.example fieldset input[type="submit"] {
background-color: #1a7a70;
color: #ffffff;
border: 0px;
font-size: inherit;
border-radius: 3px;
padding: 8px 10px 8px 10px;
float: right;
}
.example fieldset input[type="submit"]:hover {
background-color: #187269;
}
&#13;
<div class="example">
<form>
<fieldset>
<input type="submit" value="Go">
<div><input type="text" name="p" value="0"></div>
</fieldset>
</form>
</div>
&#13;