Html 使用 li 元素作为按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41821877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use li element as a button
提问by Suraj
I have ul elements like below in my html
我的 html 中有如下 ul 元素
<ul class="nav" id="loadCategories">
<li class="sub-menu"><a href="#">Search by category</a>
<ul class="">
<li><a href="#">Food</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#">Search by city</a>
<ul class="">
<li><a href="#">Mumbai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
</ul>
Now I want to use a button just below this ul. But when I put something like the code below it breaks.
现在我想在这个下面使用一个按钮ul。但是当我在下面放置类似代码的内容时，它会中断。
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>
So is there any way I can put my button as a lielement in order to get the exact same look(CSS).
那么有什么方法可以将我的按钮作为一个li元素，以获得完全相同的外观（CSS）。
Here's the fiddlefor the same. The button should look like the ulelement
这是相同的小提琴。按钮应该看起来像ul元素
回答by Saroj
Here is the code just add a button in a "li" element and remove bullet.
这里的代码只是在“li”元素中添加一个按钮并删除项目符号。
<ul class="nav" id="loadCategories">
<li class="sub-menu">
<a href="#">Search by category</a>
<ul class="">
<li><a href="#">Food</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="#">Search by city</a>
<ul class="">
<li><a href="#">Mumbai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="no-bullet">
<button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
</li>
</ul>
Also make the list-style-typeto none
也使list-style-type无
.no-bullet{
list-style-type: none
}
Here is a fiddle check it out.Hope it helps!! link
这是一个小提琴检查出来。希望它有帮助！！关联
回答by jinnoflife
Did you try width=100%and height=100%with set parameters for the list?
你尝试width=100%，并height=100%与该列表设置参数？
回答by shyamm
you can try this
你可以试试这个
<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
<li class="sub-menu"><a href="#">Search by category</a>
<ul class="">
<li><a href="#">Food</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#">Search by city</a>
<ul class="">
<li><a href="#">Mumbai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
</ul>
回答by Web_Designer
回答by Achu S
Could you please check with this code?
你能检查一下这个代码吗？
<ul class="nav" id="loadCategories">
<li class="sub-menu"><a href="#">Search by category</a>
<ul class="">
<li><a href="#">Food</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#">Search by city</a>
<ul class="">
<li><a href="#">Mumbai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#"></a>
<button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
</li>
</ul>
The output will be: 
输出将是：
回答by Amol Udage
Please try below code snippet..
请尝试下面的代码片段..
<ul class="nav" id="loadCategories">
<li class="sub-menu"><a href="#">Search by category</a>
<ul class="">
<li><a href="#">Food</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#">Search by city</a>
<ul class="">
<li><a href="#">Mumbai</a></li>
<li><a href="#">Bangalore</a></li>
<li><a href="#">Personal</a></li>
</ul>
</li>
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">
</ul>
CSS:
CSS：
.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff; display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
}
JAVASCRIPT:
爪哇脚本：
$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});
$( "li.sub-menu" ).click(function() {
$(this).toggleClass('act');
$(this).find('ul').slideToggle();
});
