Блог

Главная - Вопросы по программированию - Отображение встроенного с элементами li, плавающими влево

Отображение встроенного с элементами li, плавающими влево

#html #css

#HTML #css

Вопрос:

Я хотел бы иметь поле наведения курсора на мой список, чтобы они могли отображать алфавиты бок о бок. В этой ссылке показан пример: всякий раз, когда я наводил курсор мыши на слово «заголовок», у меня были бы A, B, C и другие рядом.

Как я могу добиться этого, настроив css?

На данный момент я смог отобразить только A, B, C в вертикальном порядке. CSS на данный момент:

 #topbar{
    width: 80%;
    list-style-type: none;
}
#topbar > li:hover ul { display: inline;}

#topbar > li {
        float: left;
        margin-left: 20px; 
        margin-right: 20px;
        font-family:"Georgia";
}
#topbar > li > ul {
        float:left;
        display: none;
        top:32px;
        position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
        border-width:1px; background-color:white;list-style-type: none;}     
}

и мои коды ul и li:

 <ul id="topbar">
     <li> <a href="#">Title</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            ,,,
        </ul> 
    </li>
    <li> <a href="#">Type</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
    <li> <a href="#">Format</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
</ul>

Ответ №1:

Чтобы получить список AZ, плавающий слева, просто добавьте это правило:

 #topbar > li > ul li {
  float:left;   
  margin:0 5px; // Or whatever margin you want
}

http://jsfiddle.net/tcwsb/3/

В конце вашего CSS-кода есть дополнительная закрывающая фигурная скобка, которая может вызвать проблемы, если вы пытаетесь добавить какие-либо правила под этим последним

Комментарии:

1. привет, что margin: 0 5px; означает?

2. Это короткая рука для margin-top:0;margin-bottom:0;margin-left:5px;margin-right:5px;

Ответ №2:

Это тот CSS, который вам нужен:

 #topbar { list-style:none; width: 80%; }
#topbar > li { 
    display:inline-block; 
    *display:inline;
    position:relative;
}
#topbar > li > a { padding:1em 20px; }

#topbar li ul {
    display:none;
    position:absolute;
    top:2em;
    left:20px;
    padding:5px;
    background:white;
    border:1px solid black;
}

#topbar li ul li { 
    display:inline-block;
    *display:inline;
}

#topbar > li:hover ul { display:block }

Вот рабочая демонстрация: http://jsfiddle.net/rfn9S /