горизонтальні пункти меню, що не відображаються в рядку

Я намагаюся створити горизонтальне меню:

CSS

 #menu {
        display:inline;
        float:right;
    }
    #menu > li {
        display:inline;
        list-style:none;
        width:40px;
        border-top:4px solid #FFFFFF;
        padding-top:20px;
        margin-top:25px;
    }

HTML:

<div id="menu">
  • HOME
  • 
    
  • HOME
  • 
    
  • HOME
  • 
    
  • HOME
  • 
    
  • HOME
  • 
    
  • HOME
  • 
    
  • HOME
  • </div><!-- menu -->
    

    Я додав display: inline; , але вони не відображаються правильно з upper-border , коли я видаляю display: inline; він працює нормально але всі вони відображаються у вертикальному списку

    2
    Я думаю, що вам щось не вистачає ... w3schools.com/html/html_lists.asp
    додано Автор Ms. Nobody, джерело

    6 Відповіді

    У вас відсутній елемент UL, який в основному говорить, що наступні елементи списку є частиною неорганізованого списку. Ось це в скрипці:

    http://jsfiddle.net/VgRYv/

    <div id="menu">
        
    </div>
    
    ul#navlist li {
        display: inline;
        list-style-type: none;
        padding-right: 20px;
    }
    
    1
    додано

    У вас немає тегу UL. Тепер я оновлю свій код. Перевірте нижче код

    CSS

    #menu {
            display:inline;
            float:right;
        }
        #menu > ul > li {
            display:inline;
            list-style:none;
            width:40px;
            border-top:4px solid #000;
            padding-top:20px;
            margin-top:25px;
        }
    

    HTML

    <div id="menu">
        
    • HOME
    • HOME
    • HOME
    • HOME
    • HOME
    • HOME
    • HOME
    </div><!-- menu -->
    

    Демонстрація JSFiddle

    1
    додано

    використовуйте display: inline-block; замість inline (або, як альтернативу, застосуйте float: left для кожного

  • )
  • 0
    додано
    замість padding-right: 20px; використовуйте margin-right: 20px; і оберніть елементи списку всередині
      як @Alias зазначив
    додано Автор fcalderan, джерело
    @CharlieFord nOW ПЕРЕВІРКА ДО ЦЬОГО ДЕМОЮ Я думаю, ви хочете цього jsfiddle.net/K5wQa/4
    додано Автор Rohit Azad, джерело
    @CharlieFord чому ти не звик до того, що ви використовували для направлення чому, чому б ви не використовували li як це
    додано Автор Rohit Azad, джерело
    відмінно - дякую. чи є який-небудь спосіб зробити верхній бік тієї ж ширини, що й текст? jsfiddle.net/K5wQa/2
    додано Автор user2431709, джерело
    текст, як і раніше, виглядає дещо довшим, ніж верхня межа? будь-які ідеї? jsfiddle.net/K5wQa/3
    додано Автор user2431709, джерело
    Добре круто - сортували ці біти. jsfiddle.net/K5wQa/6 я можу отримати текст, вирівняний до середини верхньої межі горизонтально ?
    додано Автор user2431709, джерело

    спробуйте це

    #menu {
        display:inline;
        float:right;
    }
    #menu > li {
    
        list-style:none;
        width:40px;
        border-top:4px solid #FFFFFF;
        padding-top:20px;
        margin: 25px 8px 0 8px;
        float:left;
    }
    
    0
    додано

    add float:left to li,or add display:inline-block to li

    0
    додано

    use disply:inline-block; for the li and just float for the ul

    http://jsfiddle.net/c94hG/1/

    (я змінив колір кордону для цілей відображення) він був білим)

    0
    додано
    @CharlieFord видаліть width jsfiddle.net/c94hG/1
    додано Автор user2404546, джерело
    відмінно - дякую. чи є який-небудь спосіб зробити верхній бік тієї ж ширини, що й текст? jsfiddle.net/K5wQa/2
    додано Автор user2431709, джерело