All geek questions in one place

Inside div, li width is automatically set to ie

<div style='width:500px'>  
<ul>  
  <li> some text in 1 line</li>  
  <li> some text in 1 line</li>  
  <li> some text 2 line</li>  
  <li> some 2</li>  
  <li> 2</li>  
</ul>
</div>

I do not know what the correct CSS code is for displaying elements, for example:

the first two results automatically fit into the first row and the remaining results in the second row.   , so the main idea is to let li get its own width depending on the size of the data.

Thanks in advance

+3
source share
6 answers

I see two ways to achieve what I think you are asking:

Option 1: Make Tags <li> display:block;andfloat:left;

Option 2: Make Tags <li> display:inline-block;andwhite-space:nowrap;

2, , . , nowrap, 1.

[EDIT]

<ul>. , width:100%; / display:block;.

display:inline-block; white-space:nowrap; <li>. , , , .

: , IE, , IE - IE6,7,8 9 CSS; , .

+5

, :

  • MatTheCat, display: inline display: block
  • , float: left; , ,
  • display: inline <br /> ( , ).

, , . , , , .

, , div, " " - , display: inline .

, 250 ( div), float: left; width: 50%; dieplay.

+1

"" :

  • Containter div - display: table; equilivent to <table>
  • - : table-row; equilivent to <tr>
  • - : table-cell; equilivent to <td>

<a> - , .

FF/Chrome/Safair/IE 9 8

IE7 !

:

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

        div {
            margin: 0 auto 0 auto;
            width: 954px;
            height: 36px;
            border: 1px solid #000000;
            display: table;
        }

        ul {
            width: 100%;
            display: table-row;
            list-style: none;
            height: 100%;
        }


        li {
            display: table-cell;
            white-space: nowrap;
            border: 1px solid #00ff00;
            color: #ff0000;
        }

        a {
            text-align: center;
            display: block;
            padding: 0 15px;
            line-height: 36px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a>Item1</a></li>
            <li><a>Long Item 2</a></li>
            <li><a>Very Long Item 3</a></li>
            <li><a>Even longer example Item 4</a></li>
            <li><a>Item5</a></li>
            <li><a>Item6</a></li>
            <li><a>Medium Item7</a></li>
            <li><a>Item8</a></li>
        </ul>
    </div>
</body>

+1

div, ...

0

I think the best way is to apply

li { display:inline; }

and paste <li>without this rule to do a line break.

But can you not put all the data on one line in ONE <li>?

0
source

Maybe floating properties can help

<div style='width:500px; overflow: hidden;'>
<ul>
<li> some text in 1 line</li>
<li> some text in 1 line</li>
<li> some text 2 line</li>
<li> some 2</li>
<li>2</li>
</ul>
</div>

li {
float: left;
display: block;
}

0
source

Source: https://habr.com/ru/post/1770871/

More articles:


All Articles