标签: html-lists

我想替换ul列表的list-style-type属性,以便外部是一个光盘,然后一个内部ul列表是一个圆,而另一个内部是一个光盘,依此类推.

基本上,我想要的是这样的:

<ul><!-- use disc -->
  <li>Lorem ipsum</li>
  <li>
    <ul><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

我如何使用CSS实现这一目标？

我正在尝试创建一个有序的编号列表,其中背景颜色交替.我需要数字出现在背景中,以及排队.如果我取出list-style-position:inside;数字排队,但移出背景.

这是我的代码,下面是jsfiddle的链接.

<ol>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
    <li class="alt">ha HA ha HA!</li>
    <li>ha HA ha HA!</li>
</ol>    

ol
{
    list-style-type:decimal;
    list-style-position:inside;
    margin:1.5em;
}
.alt …

我正在尝试使用以下 CSS 来增加列表项标记的大小：

li::marker {\n  color: grey;\n  font-size: 3.5rem;\n}

<ul>\n  <li>Hello</li>\n  <li>Gromit</li>\n</ul>

\n

调整大小效果完美，但标记不再与列表项内容垂直对齐。

我尝试使用vertical-align，但我似乎无法获得所需的结果：

li {\n  vertical-align: middle;\n}\nli::marker {\n  color: grey;\n  font-size: 3.5rem;\n  vertical-align: middle;\n}

<ul>\n  <li>Hello</li>\n  <li>Gromit</li>\n</ul>

\n

我尝试使用position: absolute标记来移动它。我也尝试过transform: translateY(x);，但由于某种原因我根本无法移动标记\xe2\x80\xa6 另外，我讨厌x每次更改列表项的字体大小时都必须返回并摆弄或标记。

这是我的尝试之一作为示例：

li::marker {\n  color: grey;\n  font-size: 3.5rem;\n  transform: translateY(1000rem);\n}

<ul>\n  <li>Hello</li>\n  <li>Gromit</li>\n</ul>

\n

我见过很多类似的问题，但似乎没有一个提供解决方案：

这是我的代码:

HTML

<div class="menu">
    <ul>
      <li class="active"><a href="index.html">HOME</a></li>
      <li class="active"><a href="#">COMPANY</a></li>
      <li class="active"><a href="#">SOLUTIONS</a></li>
      <li class="active"><a href="#">SERVICES</a></li>
      <li class="active"><a href="#">NEWS & EVENTS</a></li>
      <li class="active"><a href="#">BLOGS</a></li>
      <li class="active"><a href="#">CONTACTS</a></li>
    </ul>
  </div>

CSS

.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto; height:12px; list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}

它无法识别高度特征.为什么？如何设置菜单项的高度？

编辑:另见下面我自己的答案(2016)

例如:

<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">Novità</a></li>
    <li><a href="#" title="">Promozioni</a></li>
</ul>

然后风格:

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{ list-style:none; }

#main-menu > ul > li{
    float:left;
    display:block;
    position:relative;
    margin-left:1em;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    position: absolute;
    z-index:1000;
    display:none;
    left:0;
    top:28px;
}

#main-menu > ul > li:hover ul …

我有一份清单清单.子列表左侧浮动.见http://jsfiddle.net/P4Psf/

有一种方法强制这些列是相同的高度,它们的邻居(即已经元件1,2和3相同的高度,然后是4,5,6相同的高度(但来自1,2,3当然不同)等.等等.)？

目前7和8将自己置于5和6之下,实际上他们应该低于4和5.

我当然可以使用javascript来做到这一点,但我希望有一个纯粹的CSS解决方案可以在(至少)现代浏览器中运行？

我想把我的数字和文字都对齐<ol>.这就是我想要完成的事情:

目前,每个都<li>包含一个<a>,但可以改变.到目前为止,我尝试了左边填充,然后是文本缩进<a>.

这是我现在的代码.

HTML:

<ol class="dinosaurs">
    <li><a>Dinosaur</a></li>
    <li><a>Tyrannosaurus</a></li>
    <li><a>Camptosaurus</a></li>
</ol>

CSS:

.dinosaurs{
    list-style-position: inside;
}

注意:我正在Windows 7上的Chrome 23中查看网页.

我正在尝试制作一个有6个按钮的菜单,每个按钮都有自己的背景颜色和悬停背景颜色.现在,如果链接的父li具有.active类,我不希望在悬停时显示背景颜色.这就是我试图做的事情:

//I'm making li and li.active links to have the same normal and hover state bg color and then...
li, li.active{
    &:first-child{
        a, a:hover{
            background: @1-n;
        }
        + li{
            a, a:hover{
                background: @2-n;
            }
            + li{
                a, a:hover{
                    background: @3-n;
                }
                + li{
                    a, a:hover{
                        background: @4-n;
                    }
                    + li{
                        a, a:hover{
                            background: @5-n;
                        }
                        + li{
                            a, a:hover{
                                background: @6-n;
                            }
                        }
                    }
                }
            }
        }
    }
}
//..trying to overwrite the hovers only for normal li so I …

当点击一个li元素时,我想移动Div元素"nav".

我在div中有一个List

<div id="nav">
    <ul>
        <li><a href="#t1">Flyer</a></li>
        <li><a href="#t2">Code</a></li>
        <li><a href="#t3">Angebot</a></li>
        <li><a href="#t4">Bilder</a></li>
    </ul>
</div>  

为什么这不适用于jquery:

$("#nav ul li").click(function(){
    $("#nav").animate({ 
        marginLeft: "-300px",
    }, 1000 );
});

我想从某人使用 google colab 共享的 google drive 链接下载数据。我是 colab 的新用户，我不知道该怎么做。链接是

x_train：https ://drive.google.com/open ? id = 1cUaIEd9-MLJHFGjLz5QziNvfBtYygplX

y_train: https://drive.google.com/open?id=1hv24Ufiio9rBeSqgnNoM3dr5sVGwOmBy

x_test: https://drive.google.com/open?id=1AH9lKHT5P2oQLz8SGMRPWs_M9wIM2ZRH

y_test: https://drive.google.com/open?id=1i4_azocSDuU3TcDf3OSHO1vF0D5-xMU6

提前致谢