标签: html-lists
每10个mysql结果结束并启动新的UL
我想做的就是结束电流,每10个结果开始一个新的UL
继承我的代码不能100%工作:
$sql1 = mysql_query("select * from `provinces` order by `name` asc");
while ($row1 = mysql_fetch_assoc($sql1))
{
echo '<li id="popup_'.strtolower(str_replace(' ', '_', $row1['name'])).'">';
echo '<ul>';
$sql2 = mysql_query("select * from `cities` where `id_province`='".$row1['id']."' order by `name` asc");
$count = 1;
while ($row2 = mysql_fetch_assoc($sql2))
{
if ($count % 10 == 0)
echo '</ul>';
echo '<li>'.$row2['name'].'</li>';
if ($count % 10 == 0)
echo '<ul>';
$count++;
}
echo '</ul>';
echo '</li>';
}
推荐指数
解决办法
查看次数
如何使用jquery获取html列表项的id？
我想得到<li> 使用jquery 的id .我能够使用文本,alert($(this).text())但是当我尝试alert($(this).id())它时说undefined.
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
}
</style>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#list li').click(function() {
alert($(this).id());
alert($(this).text());
});
});
</script>
</head>
<body>
<ul id="list">
<li id="l1">Value 1</li>
<li id="l2">Value 2</li>
<li id="l3">Value 3</li>
<li id="l4">Value 4</li>
<li id="l5">Value 5</li>
<li id="l6">Value 6</li>
<li id="l7">Value 7</li>
<li id="l8">Value 8</li>
<li id="l9">Value 9</li>
<li id="l10">Value 10</li>
<li id="l11">Value 11</li>
<li id="l12">Value 12</li>
</ul>
</body>
</html> …推荐指数
解决办法
查看次数
具有跨浏览器兼容性的ul在ul内的绝对定位
我有这样的事情:
<div style="width:1300px">
<ul class="ul-length ul-textalign">
<li class="li-horizontal"> A </li>
<li class="li-horizontal"> B </li>
<li class="fillgap"/>
</ul>
</div>
我试图让最后一个li用一些背景填充剩下的行.我想避免使用指定li fillgap宽度的代码,具体取决于之前lis的长度.因此,我想在绝对定位中使用最后一个li,并且它需要ul的整个宽度:
.fillgap {
position:absolute;
width:1300px; /* for some reason, width:100% is longer than the div width... */
z-index:0;
}
.ul-length {
with:100%;
}
.ul-textalign {
text-align:left; /* fix for IE, prevents the absolute li from beginning at the center */
}
.li-horizontal {
float:left;
}
在整个宽度上获得背景的最简单方法可能是设置ul的背景,但我不能这样做,因为它不符合预期的设计.我需要能够用lis做到这一点.我上面的代码在IE中导致了一个问题:li fillgap似乎保留在页面流中,因为它被放在前面的lis旁边,而不是在ul的开头...
任何的想法？
这是预期的结果(在歌剧中):
这是IE中的结果:
推荐指数
解决办法
查看次数
float:left的无序列表项不能正确浮动
任何帮助都是真诚的感谢.出于某种原因,在我的无序列表中,最后两个项目没有按预期浮动.你可以看到它在zenmonyDOTcom/immune-support-c30/
这里是布局:
ul.categories-list {
width: 620px;
padding: 30px 0 10px 60px;
float: left;
min-height:425px;
background: url(/images/categories_bkgrnd_main.png) no-repeat;
list-style:none;
text-align: center;
}
.categories-list li {
position:relative;
margin:5px;
float:left;
display: block;
}
是因为物品没有正确清理？谢谢!
推荐指数
解决办法
查看次数
获得右键单击的元素JQuery
<li>当我右键单击它时,我想得到我的元素:出现一个自定义的上下文菜单,我想对我最初选择的元素进行处理<li>.我已经尝试了这个,$(this).attr("id");但它返回了我的上下文菜单项,而不是我原来的右键单击<li>.
推荐指数
解决办法
查看次数
如何在ul li中垂直居中锚标签文本
这是我的HTML:
<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li><a href="/path1" class="one">1st button</a></li>
<li><a href="/path2" class="one">2nd button</a></li>
<li><a href="/path3" class="one">3rd button</a></li>
</ul>
如果我现在拥有的话,我还附上了一张图片.我尝试添加display:table-cell; vertical-align:middle; 到锚标签类,但它没有工作我也尝试添加一个span锚标签与一个类:display:table-cell; vertical-align:middle; 但这也不起作用,在这两种情况下,按钮的高度并不恒定.
如何垂直居中文本并保持按钮的高度和宽度相同？
结束显示:table-cell解决方案,因为它是最交叉的浏览器....起初我不喜欢它,因为我不得不硬编码我的按钮的宽度而不是100%但是一旦我超过了这是一个坚实的解决方案:我的李:
.header #sub_nav li {
display: table;
float: left;
font-size: 11px;
line-height: 12px;
margin-bottom: 12px;
margin-left: 12px;
width: 86%;
}
我的一个:
.header #sub_nav li a {
display: table-cell;
height: 45px;
vertical-align: middle;
width: 111px;
}
推荐指数
解决办法
查看次数
CSS使水平列表内容填充高度
http://jsfiddle.net/K4ZGg/ 更新这是正确的jsfiddle链接
到目前为止,我的JsFiddle有我的尝试.我真的想让菜单中的项目填充菜单的高度,并在其列表项中居中.
请帮忙.(我为这个问题的简单而道歉,我保证我已经试图解决这个问题了一段时间)
HTML
<header id="navmenu">
<ul>
<li>
<label>Welcome <span id="firstName"></span></label>
</li>
<li>
<a href="#" onclick="return false;">Option One</a>
</li>
<li>
<a href="#" onclick="return false;">Option Two</a>
</li>
</ul>
</header>
裸CSS(Full是在JsFiddle链接上)
#navmenu {
background-color: rgba(250, 250, 210, 1);
text-align:right;
height:42px;
width:100%
}
#navmenu ul {
height:42px;
}
#navmenu ul li {
display:inline;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
}
#navmenu ul li:last-child {
border-right: 0;
}
推荐指数
解决办法
查看次数
JavaScript/HTML - 从其中的a元素引用包含li元素
我有一些list-elements,每个都包含一个<a>-element:
<li class="invis article notCart" id="Waschmaschine">
<div class="articleDetails">
...stuff...
</div>
<a onclick="intoCart(this);" class="intoCart">
In den Warenkorb</a>
</li>
我想在这一行中引用li元素本身:
<a onclick="intoCart(this);"
当然this不起作用,它指的是里面的文字<a>.
是否可以在不使用ID的情况下执行此操作<li>,因为<a>它在其中？
我有很多这样的列表元素,不想通过ID引用它们中的每一个.
推荐指数
解决办法
查看次数
如何在<ul>开始之前删除此换行符？
很简单,但我无法弄清楚.
我后跟一个单词<ul>.我使无序列表具有内联样式,但我希望它与之前的单词位于同一行.
JSfiddle:http://jsfiddle.net/fm74R/4/
使用此模板使其看起来像:"标签:有趣的唯一添加标签到帖子"
谢谢!
推荐指数
解决办法
查看次数
在<li>标签内的<p>标签,基于计数器重置强制计数器强制不需要的新行
CSS counter-reset属性允许自动编号HTML元素(例如此处).除了链接中演示的用法之外,当<li>元素不是全部出现在同一<ol>标记内时,此属性对于在网页上创建连续有序列表也很有用.
但是,当<p>标签内部有<li>标签时,会强制文本显示在实际计数器后面的一行上.有没有办法在仍然使用<p>标记时阻止此行为？也就是说,如何在下面的最小工作示例中将"Life is bad" 文本<p>与其计数器显示在同一行,同时将文本保留在HTML标记中的标记内？
这是最小的工作示例(以及JSFiddle):
HTML:
<div id="test">
<ol>
<li class="continuous-list">Life is good</li>
<li class="continuous-list">
<p>Life is bad</p>
</li>
</ol>
<ol>
<li class="continuous-list">Life is good</li>
<li class="continuous-list">Life is good</li>
</ol>
</div>
CSS:
#test {
counter-reset: continuous-counter;
}
li.continuous-list {
list-style-type: none;
counter-increment: continuous-counter;
}
li.continuous-list:before {
content:"(" counter(continuous-counter)") ";
}
推荐指数
解决办法
查看次数
标签 统计
html-lists ×10
css ×5
html ×4
jquery ×2
absolute ×1
anchor ×1
css3 ×1
fill ×1
javascript ×1
mysql ×1
php ×1
right-click ×1