不带jQuery Mobile的Listview
请帮忙。我试图用HTML和CSS实现相同风格的jQuery Listview。 我几乎在那里减去了每个列表元素下的空格,还有环绕单个元素的边框,而不是整个列表 CSS代码:不带jQuery Mobile的Listview,jquery,html,css,Jquery,Html,Css,请帮忙。我试图用HTML和CSS实现相同风格的jQuery Listview。 我几乎在那里减去了每个列表元素下的空格,还有环绕单个元素的边框,而不是整个列表 CSS代码: /* Begin Navigation Bar Styling */ .nav { -webkit-background-clip: padding-box; /*-webkit-box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px 0p
/* Begin Navigation Bar Styling */
.nav {
-webkit-background-clip: padding-box;
/*-webkit-box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px 0px;*/
background-clip: padding-box;
border-bottom-left-radius: 9.600000381469727px;
border-bottom-right-radius: 9.600000381469727px;
border-top-left-radius: 9.600000381469727px;
border-top-right-radius: 9.600000381469727px;
/*box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px 0px;*/
/*display: inline-block;*/
height: 131.125px;
line-height: 20.799999237060547px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 65px;
margin-top: 16px;
padding: 0;
width: 307px;
background-color: none;
}
ul.nav {
height: 151px;
display: block;
float: left;
}
.nav li {
border-top-left-radius: 9.600000381469727px;
border-top-right-radius: 9.600000381469727px;
display: block;
height: 43.375px;
line-height: 20.799999237060547px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
overflow-x: visible;
overflow-y: visible;
padding: 0;
position: relative;
text-align: left;
width: 307px;
background-color: none;
}
.nav li a {
display: block;
padding: 10px 15px;
text-decoration: none;
font-family: arial;
font-size: 16px;
color: #000;
border: 1px solid #ccc;
border-bottom-left-radius: 9.600000381469727px;
border-bottom-right-radius: 9.600000381469727px;
border-top-left-radius: 9.600000381469727px;
border-top-right-radius: 9.600000381469727px;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px 0px;
background-color: #f2f2f2;
}
.nav li a:hover {
background-color: #fff;
}
/* End navigation bar styling. */
HTML:
<ul class="nav">
<li><a href="#Personal" data-ajax="false">Personal</a></li>
<li><a href="#Orgnization" data-ajax="false">Orgnization</a></li>
<li><a href="#Additional" data-ajax="false">Additional</a></li>
</ul>
谢谢这里:
CSS
你想包装整个列表而不是单个元素吗?是的。有点像边框中的插入并没有环绕整个列表,但每个元素下仍有空白。为什么?非常感谢。空白是边界。你不想区分李的吗?那么我如何使它与其他边框的颜色相同呢。如果您查看这些边,则列表边上的另一个边框不正确:/
ul.nav {
display: block;
float: left;
border-bottom-left-radius: 9.600000381469727px;
border-bottom-right-radius: 9.600000381469727px;
border-top-left-radius: 9.600000381469727px;
border-top-right-radius: 9.600000381469727px;
border: 1px solid #ccc;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px 0px;
}
.nav li a {
display: block;
padding: 11px 15px;
text-decoration: none;
font-family: arial;
font-size: 16px;
color: #000;
background-color: #f2f2f2;
}