下面的代码有两个问题。
-
下拉项文本行的对齐方式(不包括第一个搜索行(。正如你们所看到的，我在同一行有两个文本——一个是英语，另一个是阿拉伯语。我想把英语文本向左对齐，阿拉伯文本向右对齐，中间留有空格，这样两者就不会相遇。
-
我想为下拉列表添加双线项目(每个下拉列表项目将有两行(。这第二行只适用于英文版，我也想保留整行的单href链接。
如果有人能帮忙，那就太好了。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 20pxpx;
width: 300px;
text-decoration: none;
}
.dropbtn {border-radius: 10px;}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://xyz.png);
float:input ;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 14px 20px 12px 45px;
border: 1px;
border-radius: 15px;
width: 298px;
border-color: #086815;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position:relative ;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 250px;
overflow: auto;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 300px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #7A7A7A;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Sureh Al-Fatihah</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">1.Sureh Al-Fatihah سُوْرَۃُ الفَاتِحَة</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
</body>
</html>
请参阅我添加代码的片段。
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 20pxpx;
width: 300px;
text-decoration: none;
}
.dropbtn {border-radius: 10px;}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://xyz.png);
float:input ;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 14px 20px 12px 45px;
border: 1px;
border-radius: 15px;
width: 298px;
border-color: #086815;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position:relative ;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 250px;
overflow: auto;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 300px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #7A7A7A;}
.show {display: block;}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Sureh Al-Fatihah</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span> </a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>