调整输入表单的大小
Posted
技术标签:
【中文标题】调整输入表单的大小【英文标题】:Resize input form 【发布时间】:2021-12-26 23:17:49 【问题描述】:我正在尝试这样做:
但现在我有这个:
我不明白如何使用右侧的图标调整输入的大小...我在 col-md-12... 你可以在这里查看我的代码:
.form
margin-top: 8px;
margin-left: 13px;
display: flex;
flex-direction: row;
.search-field
padding: 10px 35px 10px 15px;
color: #fff;
border-color: #d4e0e0;
border-radius: 15px;
outline: none;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: inset 0px 3px 6px #0000000D;
border: 1px solid #D4E0E0;
width: auto;
color: #000;
.search-button
z-index: 1;
float: inline-end;
background: transparent;
border: none;
outline: none;
margin-top: -2px;
margin-left: -45px;
.search-button img
width: 20px;
height: 20px;
object-fit: cover;
<div class="container">
<div class="list row">
<span class="font-link-bold" style= fontSize: "26px" >
<span class="title-card font-link-blue-bold">Mes </span>Conseils
</span>
<div class="button-create">
<IconCreate /> Créer un nouveau conseil
</div>
<br />
<br />
<span
class="font-link"
style= fontSize: "16px", color: "#657273"
>
Saisir vos mots-clés ou coller un texte :
</span>
</div>
<div class="row">
<div class="col-md-12">
<form action="/" method="GET" class="form">
<input
type="search"
placeholder="Search"
class="search-field"
/>
<button type="submit" class="search-button">
<img src=IconLoupe />
</button>
</form>
</div>
</div>
</div>
在我的 html 中,您可以看到“col-md-12”和另一个 col-md-12 占用所有空间...只需输入一个 col-md-3 或 6...
【问题讨论】:
【参考方案1】:尝试将 .search-field 的宽度设为 100%
.search-field
width: 100% !important;
它应该可以工作,或者您也可以尝试为您的图标指定位置
parent
position: relative;
child
position: absolute;
top: 5px;
right: 20px;
【讨论】:
它可以工作,但是我的按钮太长了...如果我调整窗口大小没有正确放置... @PouneyDesign 为此,您需要为不同的屏幕添加媒体查询。请参考-css-tricks.com/a-complete-guide-to-css-media-queries以上是关于调整输入表单的大小的主要内容,如果未能解决你的问题,请参考以下文章
如何动态调整 select2 输入的大小,使其与所选选项的宽度相同?