Як адлюстраваць <li> </li> элементы ў радку

Прывітанне Я дадаю гэта змест

  • тэгі і ён прыходзіць адзін ніжэй other.But я хачу, каб прыйсці ў адну лінію, як гэта ...
        Home  aboutus  contactus  ourservices 
    

    вось мой HTML

  • 0
    На баку запіскі, старайцеся пазбягаць выкарыстання стыль атрыбуту. Ваш
  • s маюць класы і ідэнтыфікатары, выкарыстоўвайце іх.
  • дададзена аўтар Alex, крыніца
    На самай справе, вам нават не патрэбныя гэтыя класы і ідэнтыфікатары на Lis наогул, як вы можаце арыентаваць іх праз клас/ID на самай UL.
    дададзена аўтар ralph.m, крыніца

    8 адказы

    Для таго, каб мець элемент спісу на той жа радку, вы павінны змяніць іх дысплей ўласцівасці. Акрамя таго, вы можаце пазбегнуць візуалізацыі кнопак кулявых; у гэтым выпадку вы павінны ўсталяваць спіс-стыль элемента спісу кораня None .

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    ul#ddbar {
      list-style: none;
    }
    
    ul#ddbar li {
      display: inline-block;
      
      padding: 4px 10px;
      background-color: #EEE;
      border-radius: 5px;
    }
    
    
    • Apple
    • Banana
    • Cherry
    </div> </div>

    4
    дададзена
    <�Код> спіс-турнікет , вы ўпэўненыя?
    дададзена аўтар Ash Burlaczenko, крыніца
    @AshBurlaczenko памылка друку ... дзякуй
    дададзена аўтар Bruno, крыніца
    Вось спіс стылі я адрэдагаваў DAT
    дададзена аўтар edd, крыніца
    таксама выкарыстоўваць * Дысплей: убудаваны блок; для ie8 сумяшчальныя.
    дададзена аўтар Mud Hut, крыніца

    You need to use display: inline-block; if you want to line up the li elements, on the other hand you can also you float: left;

    Калі вы зацікаўлены, каб паўторна множнік кода трохі, вы выклікаеце клас па кожнаму LI і а , дзе можна арыентаваць гэтыя элементы, як

    ul.ddbar li {
       /* Styles */
    }
    
    ul.ddbar li a {
       /* Styles */
    }
    

    Такім чынам, вы не павінны выклікаць класы па кожнаму элементу, як усе класы аднолькавыя для кожнага тыпу элемента

    Note: As far as this attribute goes menu_id="2", it's an invalid markup, I assume that your code is dynamically generated and you don't have much hold on > it, if you do have, also consider removing the inline styles, also if you are using an id for ul element you really don't have to call a class, usingul#ddbar {} will give you same results

    Demo (inline-block Example)

    Demo (float example)

    2
    дададзена
    ul#ddbar {
        list-style: none;
    }
    ul#ddbar li {
        display: inline-block;
        float: left;
    }
    

    Live demo can be seen at http://jsfiddle.net/6EZaQ/

    1
    дададзена

    Ёсць некалькі спосабаў, вы можаце зрабіць гэта:

    <�Моцны> Метад 1: Якія плаваюць складнікі спісаў

    li { float:left; }
    

    <�Моцны> Спосаб 2 і 3: Адлюстраванне элементаў спісу ў адпаведнасці з Афарызм </моцны>

    li { display:inline; }
    /* OR, if you want more flexibility: */
    li { display:inline-block; }
    

    См Найбольш Зацверджаны на гэтае пытанне ў адказ інфармацыі пра адрозненні.

    <�Моцны> Метад 4: Адлюстраванне спісу ў выглядзе табліцы

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

    All 4 methods in one JSFiddle example.


    У якасці заўвагі, пара кропак аб бягучай разметцы:

    1. menu_id isn't a valid attribute. If you want to use a custom attribute like this, you should use data-* attributes - so data-menuid="0" would suffice.
    2. 0em is the same as 0. You don't need to specify the unit when dealing with values of 0.
  • 1
    дададзена
    Добрае пытанне. Дададзеная спасылка на stackoverflow.com/a/14033814/1317805 .
    дададзена аўтар James Donnelly, крыніца
    Добры адказ, але гэта можа быць добра для ўдакладнення «гнуткасці». Ёсць і плюсы і мінусы выкарыстання ўбудаваны блок над инлайн .
    дададзена аўтар Alohci, крыніца

    Дайце паплавок налева да Лі:

    #ddbar li{
               float:left;
              }
    
    1
    дададзена

    Проста дадаўшы гэта будзе служыць вашай мэты: -

     #ddbar li {
     float:left; 
     }
    
    0
    дададзена

    Я звычайна выкарыстоўваю паплавок: злева на ЛІС, а часам я выкарыстоўваю дысплей: убудаваны блок замест гэтага. Але вы таксама можаце выкарыстоўваць дысплей: табліца (хоць па змаўчанні будзе распаўсюджвацца меню праз старонку):

    #ddbar {
        list-style: none;
        display: table;
    }
    
    #ddbar li {
        display: table-cell;
    }
    
    0
    дададзена

    проста выкарыстоўвайце

    #ddbar {
        display:inline-block;
       }
    
    0
    дададзена