标签: html-lists

我的Web应用程序框架<UL>在无效字段后面的无序列表中为每个字段呈现表单错误.我的问题是我无法设置样式,以便错误与表单字段列在同一行.换行之前会换行<UL>.

这是我要设置样式的html,显示服务器确定的无效字段:

<p>  
    <label for="id_email">Email</label>  
    <input id="id_email" type="text" name="email" />  
    <span class='field_required'> *</span>  
    <ul class="errorlist"><li>This field is required.</li></ul>  
    </p> 

如何防止span显示每个必填字段的星号的'field_required' 与表单未验证(在服务器上)时呈现的'错误列表'之间的换行符？

目前我正在造型:

  span.field_required {color:red; display:inline;}  
  ul.errorlist {list-style-type: none; display:inline;}  
  ul.errorlist li {display: inline; color:red; }  

更新: 感谢大家的帮助!

虽然我的框架(django)默认提供错误,但我已经控制了HTML <UL>.根据伟大的建议,我尝试将列表包装在自己的样式<p>和<span>.<span>现在将列表包装在Firefox 3.0中,但在Safari 4.0中则不行.

当我检查Safari中的元素时,似乎该段落正在关闭之前<UL>,即使这不是 HTML源的外观.

我偶然发现了跨浏览器的错误吗？(不,见下文!)

最终解决方案:感谢您的帮助.以下是我最终解决问题的方法:

• 更换<p>用周围的标签字段的出错组合标签<div>与风格的clear:both;.感谢jennyfofenny指出W3C规范禁止在一个块内(在我的情况下是列表中)<p>- 因此赢得了答案.这就是Safari在列表之前自动关闭我的段落的原因,尽管Firefox让它滑动.

然后,我将样式设置为:

ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: …

如果A有Ordered[A]特征,我希望能够拥有像这样的代码

val collection: List[List[A]] = ... // construct a list of lists of As
val sorted = collection sort { _ < _ }

并获得列表按字典顺序排序的内容.当然,仅仅因为A具有特征Ordered[A]并不意味着List[A]具有特征Ordered[List[A]].然而,据推测,执行此操作的"scala方式"是隐式def.

我如何隐式地将a转换List[A]为a Ordered[List[A]],假设A具有特征Ordered[A](以便上面的代码可以正常工作)？

我记得在List[A]对象上使用词典排序,但我想要的代码可以适应其他顺序.

我遇到了菜单无序列表的问题.因此,列表项过度运行<ul>和<div>边界,并且只有在到达屏幕边缘时才开始下一行.

下面是网站:http://finalonline.co.uk/mypics/gallery/categories/

我用以下jQuery脚本计算我的li元素:

HTML:

<ul class="relatedelements">
   <li style="display:none;" class="1">anything</li>
   <li style="display:none;" class="2">anything</li>
   <li style="display:none;" class="3">anything</li>
</ul>

jQuery的:

    $(function() {
        var numrelated=$('.relatedelements > li').length;
        $('.num-relatedelements').html(numrelated); 
    });

- >脚本返回:3

我用jQuery 更改了style="display: none"一些li元素的属性$(document).ready,如:$('.2').show();

我现在想以一种方式更改脚本,只使用以下脚本计算可见的li元素(我刚刚添加:jQuery docs后可见):

    $(function() {
        var numrelated=$('.relatedelements > li:visible').length;
        $('.num-relatedelements').html(numrelated); 
    });

- >脚本返回:没有

我不知道为什么它没有成功 - 也许任何人都有任何提示或想法？任何帮助都是很有帮助的.先谢谢!

例如:http://jsfiddle.net/R7GUZ/3/

我有一段时间list-style在webkit中为一个用它设计的父OL工作

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

如何使用css3将有序列表格式化为列并仍保持list-style样式？

           <ol class="text-col2">
                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>

                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem …

我正在使用本文中的说明创建多列列表:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

简而言之,它表示要按照以下方式做一些事情:

HTML:

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS:

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

它运行得非常好,但我对溢出感到难以置信:隐藏的CSS声明.

没有它,我的外部div就像这样崩溃:

http://jsfiddle.net/alininja/KQ9Nm/1/

当它包含在内时,外部div的行为与我希望的完全一样:

http://jsfiddle.net/alininja/KQ9Nm/2/

我想知道为什么overflow:hidden会触发这种行为.我希望它能切断内部的li项而不是强迫外部div扩展到必要的高度.

谢谢你的期待!

我有一个简单的js脚本,它计算无序列表所具有的子节点数.我正在尝试更改脚本,因此它不会计算包含类"hiddenItem"的div的任何子项(li).这是列表和js.

    <ul id="dlist" class="sortable">
        <li id="listItem_000002">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 2</div>
        </li>
        <li id="listItem_000003">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 3</div>
        </li>
        <li id="listItem_000009">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 9</div>
        </li>
        <li id="listItem_000012">
            <div class="hiddenItem">
                <div><a class="itemCollapse"></a>
                </div>Item 12 (Hidden)</div>
        </li>
    </ul>
    <br>
    <br>

    <a class="count">Count</a>

.

    $(".count").click(function () {
        var tcount = $("#dlist").children("li").length;
        alert(tcount);
    });

在此示例中,js警告有4个项目.但是,我正在尝试更改代码,因此它会警告3个项目,因为最后一个列表项包含具有类"hiddenItem"的div.我试过使用.filter()以及其他一些横向方法而没有运气.谁有更好的主意？

这是一个工作小提琴:http://jsfiddle.net/YeDdq/1/

任何帮助,将不胜感激.谢谢!

我也有一个用户列表:

<ul>
<li class="thumb selectable arrow light" style="margin-bottom:-5px;"
data-image="http://cdn.tapquo.com/lungo/icon-144.png">
<strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong> 
<small class="description">Hi!</small> 
</li>
...
</ul>

我想要的是每次写一封信时的文本输入,只显示以该字母开头的用户或者他们可能有这个名字的用户.我能做什么？这是jquery但不是......

这可能看起来像一个愚蠢的问题,但我已经在基本页面中添加了UL,并且列表似乎偏离了中心.列表没有什么特别之处.没有添加特定的CSS:只是一个列表.当我装载它时,它略微偏离中心.
左侧是否有默认边距或填充？

<h3>Title Heading</h3>
   <ul id="listItems">
       <li>itemOne</li>
       <li>itemTwo</li>
       <li>itemThree</li>
   </ul>

主体具有用于居中,对齐,浮动等的所有css代码."标题标题"完美对齐.只是列表有点偏.

谢谢.

哦,不知道这是否重要,但我添加了'id'原因...想要使用'first-of-type'给第一项em(粗体).

此问题通过询问如何在视口大小导致的换行符处删除分隔符来扩展" 导航分隔符 ".

->       Item 1 | Item 2 | Item 3 | Item 4 | Item 5       <-

->  Item 1 | Item 2 | Item 3  <-
->      Item 4 | Item 5       <-

这是一个小提琴,显示管道如何保持在换行符:

小提琴.

我对仅限css的解决方案感兴趣,但如果它提供唯一可能的解决方案,则javascript是可以接受的.