标签: html-lists

我正在尝试计算 css 属性为“display:block”的 li 元素的数量，但无法正确计算。
我使用了这个很棒的问题和答案：jquery count elements with attribute

它有效，但由于某种原因不适用于 li 。
这是我的代码：

$(function() {
     alert($("li[display='block']").length);
});

这是一个小提琴： http: //jsfiddle.net/dQTgg/

提前致谢！

我有一个包含多个列表项的菜单： JS Fiddle

我的目标是动态地对齐列表项，即使它分成两行或多行。

就像word中的中心按钮一样。当我对元素进行文本编辑时，<li>它只是将其<li>本身对齐。当我这样做时，margin: 0 auto它<li>会分成 8 行。

它应该是这样的：

有什么办法可以实现这一点吗？

我的问题是我无法弄清楚，无论我尝试什么，为什么<li>不想居中。注意：按中心，我的意思是使三个<li>'s 在 my<div>元素中水平居中。
我的代码：

<div class="bottomBar" id="bottomBar">
    <ul class="bottomUl">
        <li>
            <span onclick="contactMe ();"> Contact Me </span>
        </li>
        <li>
            <span> Help </span>
        </li>
        <li>
            <span> Social Media </span>
        </li>
    </ul>
</div>

和 CSS：

.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 10%; list-style-type: none; margin: 0px; display: block;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.buttonUl li {height: 100px; width: 100px; border: 1px solid red; …

如何在 Jekyll 站点中调整我当前的两列（使用 Bootstrap）有序列表？目标是让 Jekyll 获取我的 .md 文件，其中包含有序列表项并将其拆分为两列。我目前必须单独编辑两列中的每个有序列表，从长远来看这将是有问题的，因为此文档会不断更新和添加。

这是我当前的代码：

  <!-- Left Column -->

<div class="col-sm">
  <ol>
      <li>Zebras</li>
      <li>Lions</li>
  </ol>
</div>

  <!-- Right Column -->    

<div class="col-sm">
  <ol start="3">
    <li>Zebras</li>
    <li>Lions</li>
  </ol>
</div>

这是我想通过 Jekyll 完成的视觉效果。

输入（Markdown 文件）：

---
layout: default
---

1. Zebras
2. Lions
3. Tigers
4. Gorillas

理想情况下，这将被解析为：

1. Zebras        3. Tigers
2. Lions         4. Gorillas

我发现了两个关于 StackOverflow 的主题问题，但都不适合这个用例。第一个使用 YAML front-matter 来构建列表。但是，由于我的有序列表中经常有链接，我认为这种方法行不通——而且，与添加每个列表项一样乏味。第二个越来越近，但是，我认为它使用的是发布文件，而我使用的是列表项。

我可以让 Jekyll 获取有序列表项的数量，将它们分成两半（或者如果不准确，左列应该大于右列），然后将列表项放在各自的列中？最后，从左栏移出柜台（使用<ol start="x">或其他东西）。

我想用孟加拉数字值开始有序列表，如下所示：

\xe0\xa7\xa7\xe0\xa5\xa4 \xe0\xa6\x86\xe0\xa6\xae \n\xe0\xa7\xa8\xe0\xa5\xa4 \xe0\xa6\x9c\xe0\xa6\xbe\xe0\xa6\xae \n\xe0\xa7\xa9\xe0\xa5\xa4 \xe0\xa6\x95\xe0\xa6\xbe\xe0\xa6\x81\xe0\xa6\xa0\xe0\xa6\xbe\xe0\xa6\xb2 \n\xe0\xa7\xaa\xe0\xa5\xa4 \xe0\xa6\xb2\xe0\xa6\xbf\xe0\xa6\x9a\xe0\xa7\x81\n

谁能帮我解决这个问题吗？

这是我的代码：

li.title {
  list-style-type: none;
  margin-left: 0; 
  padding-left: 0;
}

<ul>
  <li class="title">Title</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

如您所见，“标题”文本之前有一个空格，其中缺少项目符号。我需要删除这个空格，换句话说，将“标题”与列表的左侧对齐。list-style-type: none使用时如何操作？

我已经设置了样式text-decoration: none; color: black;，但它似乎不适用。我查看检查选项卡，它显示它已应用，但文本没有更改。

.Bottom-Grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 150px;
  width: auto;
  text-transform: capitalize;
  font-size: 15px;
  font-family: GT Pressura Mono, Roboto Mono, monospace;
}

.List-Five,
.List-Six,
.List-Seven,
.List-Eight,
.link-1 {
  list-style-type: none;
  text-decoration: none;
  color: black;
}

<div class="Bottom-Grid">
  <div class="five">
    <ul class="List-Five">
      <li class="link-1"><a href="#">all</a></li>
      <li class="link-2"><a href="#">Tea</a></li>
      <li class="link-3"><a href="#">Merch</a></li>
      <li class="link-4"><a href="#">Brew Wares</a></li>
    </ul>
  </div>
  <div class="six">
    <ul class="List-Six">
      <li class="link-5"><a href="#">Wholesale</a></li>
      <li class="link-6"><a href="#">About …

这里的新手在尝试复制这种有序列表样式时遇到了很大的麻烦。

我尝试了某些样式技术并取得了一些成果，但无法添加内联链接，因为我将所有内容放入内容标签中。

有什么方法可以使用带有内联网址的两行首字下沉之类的数字来实现这种样式吗？

绝望的。

我有一个分级的UL列表.如何 - 使用jQuery - 获取所选LI元素的所有父元素并更改<a>每个父元素内的背景颜色？

<ul id="nav">
    <li>
        <a href="#">A</a>
        <ul>
            <li>
                <a href="#">B</a>
                <ul>
                    <li><a href="#">B1</a></li>
                    <li><a href="#">B2</a></li>
                    <li><a href="#">B3</a></li>

                    <li><a href="#">B4</a></li>
                    <li><a href="#">B5</a></li>
                </ul>
            </li>
            <li>
                <a href="#">C</a>
                <ul>
                    <li><a href="#">C1</a></li>
                    <li><a href="#">C2</a></li>
                    <li><a href="#">C3</a></li>
                </ul>
            </li>
        </ul>

如果我选择<a href="#">B4</a>,<a href="#">B</a>也<a href="#">A</a>将被选中

我在.each()没有拿起某些text/html时遇到了奇怪的问题.

我有:

<ul class="errors">
   <li class="title">Please check the details you entered and try again.</li>
   <li id="title">Please supply a title</li>
   <li id="typeID">Please select a type</li>
   <li id="availID">Please select the availablilty</li>
   <li id="city">Please supply a valid city</li>
   <li id="postcode">Please supply a valid postcode</li>
   <li id="contactNum">Please supply a valid contact number</li>
   <li id="description">Please enter a description</li>
</ul>

对于jquery:

$('.errors').children('^[id]').each(function(index){
    alert(index + ': ' + $(this).text());
});

现在的问题是,jquery没有为"description"列表项选取text/html.无论我尝试什么.

有关为什么会发生这种情况的任何想法？

谢谢,TMP

更新:我设法找到了问题.事实上,页面上有另一个具有相同ID的元素使其停止工作.奇怪的是,因为所有其他列表项都是相同的但工作得很好.也许是个bug？

干杯,TMP