标签: html-lists

场景:我有一个无序列表<ul>的宽度(比方说200px),其中四个<li>元素的大小相等.因此每个应该是50px.当我添加第5个<li>元素时,每个宽度应重新调整为40px.如果我用5 <li>元素将<ul>的宽度更改为500px ,则每个<li>元素应为100px.

这只能用CSS吗？如果是,它是如何实施的？

目前,我有一个满足上述要求的解决方案,但它包含jQuery,可以根据数学计算重新调整<li>元素的大小.

感谢您的关注.

我有一个带下拉菜单的导航栏,我希望下拉菜单可以拉伸到其中内容所需的任何宽度,但它们只会与其父元素一样宽

我已经阅读了相当多的内容,大多数人建议在下拉菜单中设置位置:绝对.我已经完成了这个并且它没有影响它

我的jsFiddle在这里:http://jsfiddle.net/Rqgh6/

有谁知道我怎么能得到它比他们的父元素更广泛的下拉菜单？

在uls中,唯一有效的元素是lis.把另一个ul放在里面ul我必须把它包装li成这样:

非法:

<ul>
  <li>first outer item</li>
  <ul>
    <li>inner item 1</li>
    <li>inner item 2</li>
  </ul>
  <li>second outer item</li>
</ul>

法律:

<ul>
  <li>First outer item</li>
  <li>
    <ul>
      <li>inner item 1</li>
      <li>inner item 2</li>
     </ul>
  </li>
  <li>Second outer item</li>
</ul>

我的问题是chrome中的第二个(没有测试过其他浏览器)在更深的子弹之前渲染子弹,如下所示(之前是两个子弹inner item 1).

• 第一个外部项目
• • 内部项目1
  • 内部项目2
• 第二个外项

我错了吗？我应该通过CSS解决这个问题吗？(如果是的话,请注意如何欣赏)

我从codebehind创建一个html列表,如下所示:

HtmlGenericControl list = new HtmlGenericControl("ul");
for (int i = 0; i < 10; i++)
{
   HtmlGenericControl listItem = new HtmlGenericControl("li");
   Label textLabel = new Label();
   textLabel.Text = "Menu"+i;
   listItem.Controls.Add(textLabel);
   list.Controls.Add(listItem);
}

但渲染列表有子弹,我想阻止它们.

像这样的旧网站:www.example.com/oldnews.html

oldnews.html页面改为现在的newnews.html

像这样的新网站:www.example.com/newnews.html

当键入任何一个www.example.com/oldnews.html时,页面会自动重定向到新页面=>

www.example.com/newnews.html

如何将旧页面重定向到新页面？

使用.htaccess文件？

我有一个带有子菜单的菜单。我使用嵌套的ul来实现这一点。现在，我面临这种情况：我希望所有项目和子项目在其相应级别水平显示。问题在于，当父级列表具有子级列表时，其宽度会增加，因此处于同一级别的下一项会向右移动。

为了使事情更清楚，这是我正在考虑的事情：http : //jsfiddle.net/matias/n8gFT/

如您所见，我希望将项目B和C放置在绿色虚线空间的位置。

是否有可能做到这一点？

我想继续使用嵌套display: inline-blockul 和itemes而不是float: left

示例HTML：

<ul>
    <li>ITEM A
        <ul>
            <li>sub item A1</li>
            <li>sub item A2</li>
        </ul>
    </li>
    <li>ITEM B</li>
    <li>ITEM C</li>
</ul>

样本CSS：

ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}

编辑1：我忘了告诉你：A，B和C有孩子。如果我单击B，则会显示其子级，而A和C则被隐藏...等等。

我在更改列表中的子弹颜色时遇到问题.

所以<nav>我的HTML文件中的标签内有一个列表:

<nav id="top-menu">
    <ul>
        <li> <a href="">Home</a> </li>
        <li><span> <a href="">Products</a> </span></li>
        <li> <a href="">Statistics</a> </li>
        <li> <a href="">Countries</a> </li>
        <li> <a href="">Settings</a> </li>
        <li> <a href="">Contacts</a> </li>
    </ul>
</nav>

所以你可以看到我的<nav>标签有一个id="top-menu".还有一件事:

<li><span> <a href="">Products</a> </span></li>

在这里你可以看到我<span>在我的子弹中放了一个标签.

这是我的CSS文件:

nav#top-menu {
    width: 100%;
    height: 33px;
    background-color: #696969;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0; …

我在这里有这个列表:jsfiddle

<div class="footer-location">
    <ul>
        <li>123 Fake St.</li>
        <li>Toronto, Ontario, Y1Y 1Y1</li>
        <li>416-555-5555</li>
        <li><a href="mailto:info@email.com">info@email.com</a></li>
    </ul>
</div>

我试图将整个列表居中,我尝试设置宽度并将边距设置为0 auto,但它没有做任何事情,这是我的css代码:

.footer-location {
    float: left;
    width: 100%;
    padding-right: 20px;
    padding-left: 25px;
    margin: 0 auto;
    text-align: center;
}

.footer-location ul {
    list-style: none;
}

.footer-location ul li {
    color: #808080;
    padding-bottom: 3px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    padding-right: 10px;
}

我正在使用WordPress.我有一个用列表构建的菜单.

基本上,它的样本是这样的:

<ul>
    <li>FrontPage</li>
    <li>MenuItem</li>
    <li>ParentMenuItem
        <ul> <--- This wont adjust its height to fit its children
            <li>MenuItemChild</li>
            <li>MenuItemChild</li>
        </ul>
    </li>
    <li>MenuItem</li>
</ul>

现在,ParentMenuItem将不会展开并覆盖其背景和边框的所有子项.我无法弄清楚为什么.只有我能够覆盖它的方法是给它一个固定的高度.

这是一个段落在非样式列表项(<li>)中的样子:

<li>
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

但是,使用自定义列表样式类型时,它看起来像这样:

这个HTML是:

<li class="docs-test">
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

CSS是:

.docs-test {
  color: red;
  list-style-type: none;
}

.docs-test::before {
  content: '\2022 ';
  color: #828282;
  display: inline-block;
  margin-right: 10px;
}

.docs-test p {
  display: inline-block;
}

我知道对于这个特定的自定义列表样式类型,我可以使用list-style-image.但是,我有其他海关清单样式类型,我不能使用列表样式图像.

我怎样才能使自定义CSS内容列表样式类型的列表项内的段落不跳转到下一行"行"的开头？目标是这些自定义列表样式列表以与没有样式的常规列表相同的方式处理段落.

http://jsbin.com/kimilaniga/1/edit?html,css,output