发表新帖
发表新帖

Indent List in HTML and CSS

后端 未结
关注
7 1477
抹茶落季
抹茶落季 2021-02-05 04:17

I\'m new to CSS and working with list. I tried using one of the code I saw on w3schools which shows how to indent lists:





A n
相关标签:
7条回答
  • 南旧
    2021-02-05 04:46

    I solved the same problem by adding text-indent to the nested list. 

    <h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul id="list2">
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

#list2
{
 text-indent:50px;
}
    0 讨论(0)
  • 猫巷女王i
    2021-02-05 04:49

    You can also use html to override the css locally. I was having a similar issue and this worked for me:

    <html>
<body>

<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
    0 讨论(0)
  • 刺人心
    2021-02-05 04:52 

    li {
  padding-left: 30px;
}
    <p>Some text to show left edge of container.<p>
<ul>
  <li>List item</li>
</ul>
    The above will add 30px of space between the bullet or number and your text.

    li {
  margin-left: 30px;
}
    <p>Some text to show left edge of container.<p>
<ul>
  <li>List item</li>
</ul>
    The above will add 30px of space between the bullet or number and the left edge of the container.

    0 讨论(0)
  • 盖世英雄少女心
    2021-02-05 05:00

    Normally, all lists are being displayed vertically anyways. So do you want to display it horizontally?

    Anyways, you asked to override the main css file and set some css locally. You cannot do it inside <ul> with style="", that it would apply on the children (<li>).

    Closest thing to locally manipulating your list would be:

    <style>
    li {display: inline-block;}
</style>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
        <li>Black tea</li>
        <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
    0 讨论(0)
  • 太阳男子
    2021-02-05 05:01

    It sounds like some of your styles are being reset.

    By default in most browsers, uls and ols have margin and padding added to them.

    You can override this (and many do) by adding a line to your css like so

    ul, ol {  //THERE MAY BE OTHER ELEMENTS IN THE LIST
    margin:0;
    padding:0;
}

    In this case, you would remove the element from this list or add a margin/padding back, like so

    ul{
    margin:1em;
}

    Example: http://jsfiddle.net/jasongennaro/vbMbQ/1/

    0 讨论(0)
  • 一生所求
    2021-02-05 05:03

    Yes, simply use something like:

    ul {
  padding-left: 10px;
}

    And it will bump each successive ul by 10 pixels.

    Working jsFiddle

    0 讨论(0)
 看不清?
提交回复
热议问题