我想换一个水平列表视图

-5

我创建了如下一个简单的UL李列表中的移动设备来选择框：我想换一个水平列表视图

<ul> 
    <li>All</li> 
    <li>All</li> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
</ul>

现在它看起来是这样的：

我希望这是像移动设备中的选择框

来源

2017-02-23 Ravichandra

欢迎来到Stack Overflow！请参考[游览]（http://stackoverflow.com/tour），环顾四周，阅读[帮助中心]（http://stackoverflow.com/help），特别是[我该如何问一个好问题？]（http://stackoverflow.com/help/how-to-ask）努力解决这个问题。如果遇到特定问题，请尝试使用jQuery提供的问题（使用jQuery的JavaScript代码），说明什么不起作用，并解释迄今为止的研究。 –

创建为选框并将其隐藏起来。并在移动宽度打开它并隐藏你的水平菜单 –

hello friend, 

if you need your <ul> <li> structure as select box in mobile device,so you need to code this structure twice. 

1. as you already write.add class name to hide this in mobile 
<ul class="list-desktop-wrap"> 
    <li>All</li> 
    <li>All</li> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
</ul> 



2.<div class="section-mobile-only"> 
<select> 
    <option value="All" selected>All</option> 
    <option value="All">All</option> 
    <option value="Option1">Option 1</option> 
    <option value="Option2">Option 2</option> 
    <option value="Option3">Option 3</option> 
</select> 
</div> 
As make this section display none in desktop & and display block in mobile device. if you need to view select box after 768 resolution (i-pad) so make css as 
@media (max-width:768px){ 
.list-desktop-wrap{display:none}; 
.section-mobile-only{display:block}; 
} 

initally its 

.section-mobile-only{display:none};

来源

2017-02-23 11:57:51

我想换一个水平列表视图

回答

相关问题