Question

我想使输入边框与标签底部对齐。

我试图改变它们的高度，但是渲染并不总是相同的。这是我现在得到的： This is a link to the picture of what I get

（我已删除了height属性，但无效）

#options_body_search {
    width: 100%;
    height: 3vh;
    margin: 1vh 0 0.8vh 0;
}

#options_body_search .container {
    display: flex;
    flex-direction: row;
    width: 70%;
    height: 100%;
    margin: 0 auto;
}

#options_body_search label {
    display: block;
    width: 22.5%;
    height: 55%;
    padding: 0.5vh;
    font-size: 0.7vw;
    font-weight: bolder;
    background: #1C57A5;
    color: #FDFFFC;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#options_body_search input {
    display: block;
    font-size: 0.7vw;
    border: none;
    border-bottom: 2px #1C57A5 solid;
}

#options_body_search input::placeholder {
    font-size: 0.7vw;
}

<div id="options_body_search">
    <div class="container">
        <label for="global_search">Recherche:</label>
        <input id="global_search" type="text" placeholder="Rechercher dans toutes les colonnes" size="35">
    </div>
</div>

（“大小”属性由JQuery添加）

如果输入的边框底部与标签的底部对齐，那将是完美的选择。

感谢您的帮助。

Answer 1

#options_body_search {
    width: 100%;
    height: 3vh;
    margin: 1vh 0 0.8vh 0;
}

#options_body_search .container {
    display: flex;
    flex-direction: row;
    width: 70%;
    height: 100%;
    margin: 0 auto;
    align-items: flex-end;
}

#options_body_search label {
    display: block;
    width: 22.5%;
    height: 55%;
    padding: 0.5vh;
    font-size: 0.7vw;
    font-weight: bolder;
    background: #1C57A5;
    color: #FDFFFC;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#options_body_search input {
    display: block;
    font-size: 0.7vw;
    border: none;
    border-bottom: 2px #1C57A5 solid;
}

#options_body_search input::placeholder {
    font-size: 0.7vw;
}

<div id="options_body_search">
    <div class="container">
        <label for="global_search">Recherche:</label>
        <input id="global_search" type="text" placeholder="Rechercher dans toutes les colonnes" size="35">
    </div>
</div>

将align-items：flex-end赋予容器类

Answer 2

尝试关注。

#options_body_search {
    width: 100%;
    margin: 1vh 0 0.8vh 0;
}

#options_body_search .container {
    display: flex;
    flex-direction: row;
    width: 70%;
    height: 100%;
    margin: 0 auto;
}

#options_body_search label {
    display: block;
    width: 22.5%;
    padding: 0.5vh;
    font-weight: bolder;
    background: #1C57A5;
    color: #FDFFFC;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#options_body_search input {
    display: block;
    border: none;
    border-bottom: 2px #1C57A5 solid;
}

<div id="options_body_search">
    <div class="container">
        <label for="global_search">Recherche:</label>
        <input id="global_search" type="text" placeholder="Rechercher dans toutes les colonnes" size="35">
    </div>
</div>

将输入元素与其标签对齐

2 个答案: