发表新帖
发表新帖

how to align all my li on one line?

前端 未结
关注
7 1228
灰色年华
灰色年华 2020-12-31 02:57

my CSS

ul{
overflow:hidden;
}
li{
display:inline-block;
}

my HTML

    

  • a
    • 

  • b
    •
相关标签:
7条回答
  • 南笙
    2020-12-31 03:22

    Other than white-space:nowrap; also add the following CSS

    ul li{
  display: inline;
}
    0 讨论(0)
  • 夕颜
    2020-12-31 03:27

    Here is what you want. In this case you do not want the list items to be treated as blocks that can wrap.

    li{display:inline}
ul{overflow:hidden}
    0 讨论(0)
  • 粉色の甜心
    2020-12-31 03:31

    This works as you wish:

    <html>
<head>
    <style type="text/css"> 

ul
{ 
overflow-x:hidden;
white-space:nowrap; 
height: 1em;
width: 100%;
} 

li
{ 
display:inline; 
}       
    </style>
</head>
<body>

<ul> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
<li>abcdefghijklmonpqrstuvwxyz</li> 
</ul> 

</body>
</html>
    0 讨论(0)
  • 予麋鹿
    2020-12-31 03:32

    Using Display: table

    HTML:

    <ul class="my-row">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

    CSS:

    ul.my-row {
  display: table;
  width: 100%;
  text-align: center;
}

ul.my-row > li {
  display: table-cell;
}

    SCSS:

    ul {
  &.my-row {
    display: table;
    width: 100%;
    text-align: center;

    > li {
      display: table-cell;
    }
  } 
}

    Work great for me

    0 讨论(0)
  • 傲寒
    2020-12-31 03:35

    I think the NOBR tag might be overkill, and as you said, unreliable.

    There are 2 options available depending on how you are displaying the text.

    If you are displaying text in a table cell you would do Long Text Here. If you are using a div or a span, you can use the style="white-space: nowrap;"

    0 讨论(0)
  • 情书的邮戳
    2020-12-31 03:40

    Try putting white-space:nowrap; in your <ul> style

    edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)

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