Место UL справа от SPAN

Мне нужно иметь UL с правой стороны SPAN (http://jsfiddle.net/Shg9L/8/).Место UL справа от SPAN

Если ширина не достаточно, я хотел бы, UL, чтобы быть на правой стороне SPAN но элементы LI, чтобы начать укладку ...

Проблема заключается в том, что при изменении размера вниз окна в UL проходит под SPAN.

Код настоящее время у меня есть (http://jsfiddle.net/Shg9L/8/):

HTML

<div> 
    <span>Categories</span> 
    <ul> 
    <li><a href="#">Book</a></li> 
    <li><a href="#">Computer</a></li> 
    <li><a href="#">Tablet</a></li> 
    <li><a href="#">Toy</a></li> 
    <li><a href="#">Music</a></li> 
    <li><a href="#">Audio</a></li> 
    <li><a href="#">Game</a></li> 
    </ul> 
</div>

CSS

div {.clear;} 

div span { 
    background-color: #E0E0E0;  
    float: left; 
    margin-right: 8px; 
    margin-bottom: 8px; 
    padding: 8px; 
} 

div ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
    .clear;  
} 

div ul li { 
    background-color: #F0F0F0;  
    float: left; 
    margin-right: 8px; 
    margin-bottom: 8px; 
    padding: 8px; 
} 

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

ли кто-нибудь знает, как решить эту проблему?

Спасибо, Miguel

источник

2014-02-13 Miguel Moura

Fiddle

удалить float:left; в вашем div ul

источник

2014-02-13 12:14:27 Karuppiah

это тоже работает, но он мог бы написать «категории» внутри литий тоже, и стиль его –

Это не то, что я хочу ... Я не хочу, чтобы пункты, чтобы быть в разделе «Категории» span ... И в этом случае это происходит ... В основном я хочу два столбца без использования таблицы ... Любая идея? –

@MDMoura: просто пример для двух столбцов без использования таблицы ... http://jsfiddle.net/Shg9L/34/ – Karuppiah

Вы можете использовать div {white-space:nowrap;}, чтобы убедиться, что он не ломается на содержание дел. ul имеет display:inline-block; вместо float: left;. Поплавок влево заставляет его идти влево, оставляя поток текста, а встроенный блок все еще удерживает его в потоке текста, не занимая новой строки.

demo

источник

2014-02-13 12:18:04 MarijnS95

На самом деле ваш пример не работает ... Некоторые слова скрываются справа от окно при изменении размера .. любая идея почему? –

Возможно, попробуйте удалить свойство nowrap в пустое пространство. – MarijnS95

. Прочитав свой комментарий ниже, вы хотите, чтобы предметы сломались, но следующая строка не начинается с «категорий», а под книгой. Попробуйте обернуть их в div. Я приведу пример этого, когда вернусь на свой компьютер – MarijnS95

Место UL справа от SPAN

ответ

Смежные вопросы