小贝子编程

如何使用CSS使ul宽度与其父宽度相同

  • 本文关键字：何使用 ul CSS css bootstrap-4
  • 更新时间 :
  • 英文 :


我有一个列表，每次你输入搜索时都会显示它，问题是当我在小型设备上测试它时，列表的宽度大于搜索输入或他的父级，这不应该发生

在小型设备中，应始终如下所示：https://www.screencast.com/t/cQj9PNG9

但事实并非如此，它看起来是这样的：https://www.screencast.com/t/9LSDht6r

我该如何解决？

我已经尝试过使用它，但它覆盖了col元素的行为

.parent{
display: contents; 
}


#search-box{
border-style:none;
border-radius: 5px 0px 0px 0px ; 
height: 3rem;
background: #EEEEEE ;
position:relative;
}
.divider-border{
border-right: 2px solid #DFD6D6;
height: auto;
}
.btn-default{
border-radius: 0px 5px 0px 0px !important;
background: #EEEEEE ;
}
input[type=search]:focus {
outline:none !important;
outline-width: 0 !important;
background: white !important;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
input:focus ~ .btn-default {
background: white ;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
.btn-default:focus,.btn-default:active {
outline: none !important;
box-shadow: none;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
background: white;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
font-weight: 700;
background : url("images/baseline_clear_black_18dp.png") ;
}

#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: scroll;
min-height: fit-content;
max-height: 13rem;
border: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 6px 10px 0 rgba(0, 0, 0, 0.2);
/*margin-top: -0.5px; /*This hide the line between the input and the search list*/
border-radius: 0px 5px 0px 0px !important;
transform: translate3d(0px,0px,0px) !important;
position:absolute;
top: 47px !important;
width: 100%;
}

#myUL li a {
margin-top: -1px; /* Prevent double borders */
background-color: #ffffff; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
::-webkit-scrollbar-thumb {
background: #737272; 
border-radius: 20px;
}
::-webkit-scrollbar {
width: 7px;
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<link rel="stylesheet" href="style.css">
<title>Emails View</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Searchbar -->
<div class="col-4 parent">
<div class="input-group mt-4 ml-2">
<input type="search" class="form-control search-radius" onkeyup="searchFilter()" name="search-template" placeholder="Search or select template " id="search-box">
<span class="divider-border"></span>
<button type="button" class="btn btn-default dropdown-toggle" id="search-box-btn" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="myUL" class="dropdown-menu " role="menu">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
<li><a href="#">George</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Alis</a></li>
<li><a href="#">Alberto</a></li>
</ul>
</div>
</div>
<!-- /Searchbar -->

</div>



</div>

<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function searchFilter() {
// Declare variables
let input, filter, ul, li, a, i, txtValue;
input = document.getElementById('search-box');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
<script>
$('#search-box').on('input', function() {
$('#myUL').css('display', $(this).val()  !== '' ? 'block' : 'none')
});
</script>
<script>
let myUL = document.getElementById("myUL");
let search = document.getElementById('search-box');
$('#search-box-btn').click(function () { // on a click on botton
//$('#myUL').show(); // show the div with the search results
$('#myUL').css({
//'margin-left' : -$('#search-box').outerWidth( true )
}).toggle();
})
$("li").on("click", function(){
$("#search-box").val($(this).text());
$('#myUL').hide();
// myFunction(); You can put this here if you want to search right after a user clicked
});
</script>

<script>

var contentBg = document.getElementById('content');
var table = document.getElementById('table');
var square1 = document.getElementById('square1');
var square2 = document.getElementById('square2');
var ul = document.getElementById("myUL");
document.onclick = function(e){
if(e.target.id == 'content'){
table.style.transform = 'translate(0px, 0px)';
square1.style.transform = 'translate(0px, 0px)';
square2.style.transform = 'translate(0px, 0px)';
ul.style.display = 'none';
}

}

</script>
</body>
</html>

尝试替换"col-4"；在外容器中为"；col-sm-4"；，因此，对于较小的设备，它占据了100%的宽度：

#search-box{
border-style:none;
border-radius: 5px 0px 0px 0px ; 
height: 3rem;
background: #EEEEEE ;
position:relative;
}
.divider-border{
border-right: 2px solid #DFD6D6;
height: auto;
}
.btn-default{
border-radius: 0px 5px 0px 0px !important;
background: #EEEEEE ;
}
input[type=search]:focus {
outline:none !important;
outline-width: 0 !important;
background: white !important;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
input:focus ~ .btn-default {
background: white ;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
.btn-default:focus,.btn-default:active {
outline: none !important;
box-shadow: none;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
background: white;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
font-weight: 700;
background : url("images/baseline_clear_black_18dp.png") ;
}

#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: scroll;
min-height: fit-content;
max-height: 13rem;
border: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 6px 10px 0 rgba(0, 0, 0, 0.2);
/*margin-top: -0.5px; /*This hide the line between the input and the search list*/
border-radius: 0px 5px 0px 0px !important;
transform: translate3d(0px,0px,0px) !important;
position:absolute;
top: 47px !important;
width: 100%;
}

#myUL li a {
margin-top: -1px; /* Prevent double borders */
background-color: #ffffff; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration: none; /* Remove default text underline */
font-size: 18px; /* Increase the font-size */
color: black; /* Add a black text color */
display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
::-webkit-scrollbar-thumb {
background: #737272; 
border-radius: 20px;
}
::-webkit-scrollbar {
width: 7px;
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Our css -->
<link rel="stylesheet" href="style.css">
<title>Emails View</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Searchbar -->
<div class="col-sm-4 parent">
<div class="input-group mt-4 ml-2">
<input type="search" class="form-control search-radius" onkeyup="searchFilter()" name="search-template" placeholder="Search or select template " id="search-box">
<span class="divider-border"></span>
<button type="button" class="btn btn-default dropdown-toggle" id="search-box-btn" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="myUL" class="dropdown-menu " role="menu">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
<li><a href="#">George</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Alis</a></li>
<li><a href="#">Alberto</a></li>
</ul>
</div>
</div>
<!-- /Searchbar -->

</div>



</div>

<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function searchFilter() {
// Declare variables
let input, filter, ul, li, a, i, txtValue;
input = document.getElementById('search-box');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
<script>
$('#search-box').on('input', function() {
$('#myUL').css('display', $(this).val()  !== '' ? 'block' : 'none')
});
</script>
<script>
let myUL = document.getElementById("myUL");
let search = document.getElementById('search-box');
$('#search-box-btn').click(function () { // on a click on botton
//$('#myUL').show(); // show the div with the search results
$('#myUL').css({
//'margin-left' : -$('#search-box').outerWidth( true )
}).toggle();
})
$("li").on("click", function(){
$("#search-box").val($(this).text());
$('#myUL').hide();
// myFunction(); You can put this here if you want to search right after a user clicked
});
</script>

<script>

var contentBg = document.getElementById('content');
var table = document.getElementById('table');
var square1 = document.getElementById('square1');
var square2 = document.getElementById('square2');
var ul = document.getElementById("myUL");
document.onclick = function(e){
if(e.target.id == 'content'){
table.style.transform = 'translate(0px, 0px)';
square1.style.transform = 'translate(0px, 0px)';
square2.style.transform = 'translate(0px, 0px)';
ul.style.display = 'none';
}

}

</script>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium