Question

我有一个简单的搜索栏，其结果应直接显示在其下方并仅在y方向上溢出。但是，结果向右移动，并且它也在x方向上溢出。对此有什么简单的解决方法？

我的HTML是：

<div id="msearchAndResult">
              <input type="text" maxLength="20" placeholder=" Search" id="msearchField">
              <ul id="mresultsList">    
                  <li class="searchres">item and or some other long text that should wrap around</li>
                  <li class="searchres">item</li>
                  <li class="searchres">item</li>
                  <li class="searchres">item</li>
              </ul>
    Other content <br>content<br>content<br>
content                  
            </div>

而css是：

#msearchField{
padding: 2px;
border: 2px solid #BEBEBE;
width: 140px;
height: 25px;
display: block;
border-radius: 7%;
background: url("/images/search_lens.jpg") no-repeat right center;
background-size: 18%;
}

#msearchAndResult {
margin-bottom: 10px;
margin-top: 1%;
width: 140px;
margin-left: auto;
margin-right: auto;
}

#mresultsList {
position: absolute;
list-style-type: none;
z-index: 5;
max-height: 110px;
overflow-y: auto;
}

.searchres {
word-wrap: break-word;
font-size: 120%;
background-color: #F5FFFA;
width: 126px;
border: 2px solid grey;
}

Answer 1

删除了列表填充和边距并使列表更广泛地修复了问题

https://jsfiddle.net/aw1ofzcz/

#mresultsList {
position: absolute;
list-style-type: none;
z-index: 5;
max-height: 110px;
overflow-y: auto;
    padding: 0;
    width: 162px;
    margin: 0;
}

html搜索栏，结果显示不正确（向右移动）

1 个答案: