ОТДЕЛЕНИЯ вертикально не выравниваются в горизонтальной прокрутке DIV
Я пытаюсь сделать a Это то, что я хочу (работы в Firefox) и что я вошел в Chrome: Проблема происходит каждый раз, когда текст абзаца переносится в Это - мой HTML и CSS: Info regarding this list of items text more text, in another line, now wrapping and etc and etc second item third item and more Кто-то знает, как зафиксировать это? Или делает кто-то знает другой способ сделать это Исправлено :-) Проблема не в разрыве строки, а в выравнивании по вертикали. Благодаря tahdhaze09, который помог мне разобраться в проблеме, это решение у меня есть: Не знаю почему, но Пытались ли вы добавить top:0 в спецификацию списка ? (не могу попробовать здесь, только мои мысли). Просто выстрел в темноте, но можете ли вы попробовать удалить все белое пространство между дайвами? (Нет отступов). И к вашему сведению, Разве нельзя просто изменить класс .item на Это работает для меня в FF/Chrome: ] У меня нет проблем с твоим кодом на FF, Chrome или Safari. [ ] Это тот же самый код, но чтобы быть уверенным: [s с white-space: no-wrap; в a overflow-x: scroll;. Проблема состоит в том, что я не могу использовать абзацы с обтекающим текстом в них s, потому что это повреждает расположение в Chrome.
s..info {
width: 250px;
height: 200px;
float: left;
}
.list {
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
height: 175px;
width: 175px;
display: inline-block;
margin-left: 5px;
overflow: hidden; /* without this, the layout breaks in Firefox, too */
}
.item * {
white-space: normal;
}div не имеет фиксированной ширины).
5 ответов
.item {
height: 175px;
width: 175px;
display: inline-block;
margin-left: 5px;
/*overflow: hidden; without this, the layout breaks in FF too - REMOVED */
vertical-align:text-top; /* ADDED */
}
переполнение:hidden заставило встроенные элементы выравниваться сверху на Firefox. Тогда в этом нет необходимости. vertical-align:text-top исправило проблему во всех основных браузерах.
внутри не подтвердится. Скорее всего, это не корень вашей проблемы, но наличие корректного HTML всегда есть при поиске ошибки.
position:relative с float:left так, чтобы они выглядели рядом друг с другом? .item {
height: 175px;
width: 175px;
position: relative;
float: left;
margin-left: 5px;
overflow: hidden;
}
] <!DOCTYPE HTML>
<html>
<head>
<title>Highlighting Elements</title>
<style>
.info {
width: 250px;
height: 200px;
float: left;
}
.list {
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
height: 175px;
width: 175px;
display: inline-block;
margin-left: 5px;
overflow: hidden; /* without this, the layout breaks in FF too */
}
.item * {
white-space: normal;
}
</style>
</head>
<body>
<div id="listOne red">
<div class="info blue">
<p>info regarding this list of itens</p>
</div>
<div class="list">
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
<span class="item">
<p>text</p>
<p>more text, in another line, now wrapping</p>
<p>and etc and etc</p>
</span>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Похожие вопросы: