ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display: inline не помещается
20 сообщений из 20, страница 1 из 1
display: inline не помещается
    #37900269
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
Есть менюха ul > li и вот как то не влазиет она по ширине. А должна))

Стили:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
.header_menu {
            width: 100%;
            height: auto;
}

.header_menu ul li a {
            text-decoration: none;
            text-align: center;
            display: block;
            color: #000;
            position: relative;
            width: 192px;
            height: 39px;
            padding-top: 20px;
            font-size: 14px;
            background: url(../images/menubg.jpg) center no-repeat;
}

.header_menu ul {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    letter-spacing: -1px;
}

.header_menu li {
        width: auto;
        display: inline-block;
        list-style: none;
        padding: 0;
        line-height: normal;
        letter-spacing: normal;  
}
...
Рейтинг: 0 / 0
01.08.2012, 12:51:14
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900327
zolitude
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
zolitude
Гость
SharuPoNemnogu,

контейнер узок.
...
Рейтинг: 0 / 0
01.08.2012, 13:37:19
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900333
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
zolitude,

Имеем 4 блока по 192px шириной без всяких отступов. 4*192=768. Ширина контейнера 790.
...
Рейтинг: 0 / 0
01.08.2012, 13:38:36
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900343
zolitude
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
zolitude
Гость
SharuPoNemnogu,

html и css код с контейнером в студию!
...
Рейтинг: 0 / 0
01.08.2012, 13:42:35
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900348
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
zolitude,

Css выше. html вот:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<div class="header_menu">
                        <ul>
                            <li><a href="#">Главная</a></li>
                            <li><a href="#">Первая</a></li>
                            <li><a href="#">Вторая</a></li>
                            <li><a href="#">Третья</a></li>
                        </ul>
                    </div>
...
Рейтинг: 0 / 0
01.08.2012, 13:45:12
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900351
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
SharuPoNemnogu, всё нолрмуль :)
...
Рейтинг: 0 / 0
01.08.2012, 13:46:40
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900354
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      .header_menu {
        width: 100%;
        height: auto;
      }
      .header_menu ul li a {
        text-decoration: none;
        text-align: center;
        display: block;
        color: #000;
        position: relative;
        width: 192px;
        height: 39px;
        padding-top: 20px;
        font-size: 14px;
        background: url(../images/menubg.jpg) center no-repeat;
      }
      .header_menu ul {
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 0;
        letter-spacing: -1px;
      }
      .header_menu li {
        width: auto;
        display: inline-block;
        list-style: none;
        padding: 0;
        line-height: normal;
        letter-spacing: normal;
      }
    </style>
  </head>
  
  <body>
    <div class="header_menu">
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Первая</a></li>
        <li><a href="#">Вторая</a></li>
        <li><a href="#">Третья</a></li>
      </ul>
    </div>
  </body>

</html>
...
Рейтинг: 0 / 0
01.08.2012, 13:47:21
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900356
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
В каком браузере смотреть-то? :)
...
Рейтинг: 0 / 0
01.08.2012, 13:48:06
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900369
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
от сц..ко! float все портил. Всем спасибо)
...
Рейтинг: 0 / 0
01.08.2012, 13:54:15
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900372
zolitude
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
zolitude
Гость
SharuPoNemnoguzolitude,

Имеем 4 блока по 192px шириной без всяких отступов. 4*192=768. Ширина контейнера 790.

а где собственно в Вашем коде указано 790?
в коде который здесь представлен, описанный баг не подтверждается.
...
Рейтинг: 0 / 0
01.08.2012, 13:56:24
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900381
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
zolitude
а где собственно в Вашем коде указано 790?
в коде который здесь представлен, описанный баг не подтверждается.
Для этого был скрин. Но уже все решилось.
...
Рейтинг: 0 / 0
01.08.2012, 14:00:14
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900398
Фотография Hett
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hett
Участник
Как я понимаю проблема была в том, что пробелы/переносы между li занимали лишнее место?
...
Рейтинг: 0 / 0
01.08.2012, 14:05:43
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900418
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
Hett,

нет, это пофиксилось вот этим
Код: css
1.
2.
3.
font-size: 0;
        line-height: 0;
        letter-spacing: -1px;


Перед менюхой был див с float:right; поставил очистку и все заработало
...
Рейтинг: 0 / 0
01.08.2012, 14:13:10
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900592
zolitude
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
zolitude
Гость
SharuPoNemnoguHett,

нет, это пофиксилось вот этим
Код: css
1.
2.
3.
font-size: 0;
        line-height: 0;
        letter-spacing: -1px;




не уверен, что элемент с такими параметрами должен существовать.
...
Рейтинг: 0 / 0
01.08.2012, 15:36:41
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900675
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
HettКак я понимаю проблема была в том, что пробелы/переносы между li занимали лишнее место?

Ну, переносов строк или пробелов понаставят между inline-block элементами, а потом удивляются почему у них невмещается (вот прям как у автора).
...
Рейтинг: 0 / 0
01.08.2012, 16:16:59
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900692
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
st_stНу, переносов строк или пробелов понаставят между inline-block элементами, а потом удивляются почему у них невмещается (вот прям как у автора).
Вот по любому не прочитал и влез со своими умозаключениями. Убрал я все пробелы и стандартные отступы, которые хз откуда берутся если указать inline или inline-block. А в чем была проблема я описал. Просто надо было поставить очистку. Не нужно считать себя умнее всех.
...
Рейтинг: 0 / 0
01.08.2012, 16:27:04
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900810
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
SharuPoNemnogust_stНу, переносов строк или пробелов понаставят между inline-block элементами, а потом удивляются почему у них невмещается (вот прям как у автора).
Вот по любому не прочитал и влез со своими умозаключениями. Убрал я все пробелы и стандартные отступы, которые хз откуда берутся если указать inline или inline-block. А в чем была проблема я описал. Просто надо было поставить очистку. Не нужно считать себя умнее всех.

Так я же не вам писал сообщение. Много кто забывает про пробелы и переносы у inline-block элементов, о них и речь. Я привёл ваш html-код в качестве примера, так как он хорошо иллюстрирует проблему.

p.s. "font-size: 0;" и прочая подобная штуковина в виде хаков, заменяется простым выстраиванием инлайн-блок элементов одну строку.
...
Рейтинг: 0 / 0
01.08.2012, 17:40:14
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900813
Фотография Hett
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hett
Участник
как вариант можно еще у блоков поставить float: left;
...
Рейтинг: 0 / 0
01.08.2012, 17:42:28
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37900870
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
Hettкак вариант можно еще у блоков поставить float: left;

Кстати, про float, хоть и оффтоп, но всё же.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
span {
	width:300px;
	vertical-align:top;
	display:inline-block;
	border:1px solid red;
	margin:0 10px 10px 0;
}
.over {
	overflow:hidden;
}
.over div {
	float:left;
	width:300px;
	margin:0 10px 10px 0;
	border:1px solid aqua;
}
</style>
</head>
<body>

	<span style="height:100px;">1</span><span style="height:20px;">2</span><span style="height:80px;">3</span><span style="height:100px;">4</span>
	
	<br><br>
	
	<div class='over'>
		<div style="height:100px;">1</div><div style="height:20px;">2</div><div style="height:80px;">3</div><div style="height:100px;">4</div>
	</div>

</body>
</html>



С флоатом элемент проваливается к ближайшему наименьшему по высоте, с inline-block поведение более часто востребованное -
...
Рейтинг: 0 / 0
01.08.2012, 18:12:29
| Ответить | Цитировать | Написать  
display: inline не помещается
    #37901276
SharuPoNemnogu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SharuPoNemnogu
Участник
А кто нибудь вообще таблицами пользуется? Все переходят на блочную верстку, а мне например некоторые моменты удобнее и быстрее сделать через таблицу. И в тему float и inline-block table-cell туда же (правда ниже ie8 не катит, но я уже давно забиваю на все, что ниже).
...
Рейтинг: 0 / 0
02.08.2012, 09:06:45
| Ответить | Цитировать | Написать  
20 сообщений из 20, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display: inline не помещается
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37901276&tid=1449515]:
 0ms
get settings:
 9ms
get forum list:
 22ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 44ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 76ms
get tp. blocked users:
 1ms
others: 203ms
total:  379ms
созд. / загр.: 379ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]