我遇到了 flex or/and 定位的问题

Question

当屏幕在移动设备上时，黑框不会像输入和文本那样展开我想做一个盒子，当它变成移动模式时，文本变成一列

那是我的 html 代码，它包含导航、ul 然后是输入/按钮

<nav class= "datesSearch-bar">
    <ul class="datesSearch-links">
        <input type="text" id="form_from" class="form-fromc" placeholder="From: mm/dd/yyyy"/>
        <input type="text" id="form-until" class="form-untilc" placeholder="Until: mm/dd/yyyy"/>
        <input type="text" id="search_input" class="form-control" placeholder="Adress or city"/>
        <button type="submit" class="btn">Search</button>
    </ul>
</nav>

那是我的 css 代码，它包含与我的 html 相同的内容，但我添加了 @media 函数，因为我希望它能够响应。我运行遇到一个问题，当我在移动模式下放在列上时，黑框没有覆盖元素

//blackBox
.datesSearch-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
      justify-content: space-around;
    background-color: #101010;
    font-family: 'Poppins', sans-serif;
    border: none;
}

//items wrapper
.datesSearch-links {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 2.5rem;
    margin-top: 10px;
    margin-bottom: 10px;
}
//inputs
.datesSearch-links input {
    border: 2px solid #3e8cf9;
    border-radius: 6px;
    color: #ffffff;
    outline: none;
    padding: 0.5rem;
    font-size: inherit;
    font-family: inherit;
    background: none;
    margin-right: 20px;
}

.datesSearch-links input:hover, .datesSearch-links input:focus {
    border-color: #a6cbff;
}

//button
.datesSearch-links button {
    color: #ffffff;
    background-color: #3e8cf9;
    padding: 0 1.5rem;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    border: none;
}

//for the screen 
@media only screen and (max-width:819px){
    .datesSearch-links{
        flex-direction: column;
        display: flex;
    }
}

Answer 1

这是您之前给 ul 的身高造成的

@media only screen and (max-width: 819px) {
    .datesSearch-links {
        flex-direction: column;
        height: auto;
    }
}

我遇到了 flex or/and 定位的问题

i'm having an issuewith flex or/and positioning

html

css

css-position

flexbox