Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display: inline не помещается / 20 сообщений из 20, страница 1 из 1
01.08.2012, 12:51:14
    #37900269
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
Есть менюха 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, 13:37:19
    #37900327
zolitude
zolitude
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
SharuPoNemnogu,

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

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

html и css код с контейнером в студию!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.08.2012, 13:45:12
    #37900348
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
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:46:40
    #37900351
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
SharuPoNemnogu, всё нолрмуль :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.08.2012, 13:47:21
    #37900354
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
Код: 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:48:06
    #37900356
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
В каком браузере смотреть-то? :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.08.2012, 13:54:15
    #37900369
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
от сц..ко! float все портил. Всем спасибо)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.08.2012, 13:56:24
    #37900372
zolitude
zolitude
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
SharuPoNemnoguzolitude,

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

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

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


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

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




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

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

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

p.s. "font-size: 0;" и прочая подобная штуковина в виде хаков, заменяется простым выстраиванием инлайн-блок элементов одну строку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.08.2012, 17:42:28
    #37900813
Hett
Hett
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
как вариант можно еще у блоков поставить float: left;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.08.2012, 18:12:29
    #37900870
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
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
| Ответить | Цитировать | Написать  
02.08.2012, 09:06:45
    #37901276
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
display: inline не помещается
А кто нибудь вообще таблицами пользуется? Все переходят на блочную верстку, а мне например некоторые моменты удобнее и быстрее сделать через таблицу. И в тему float и inline-block table-cell туда же (правда ниже ie8 не катит, но я уже давно забиваю на все, что ниже).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / display: inline не помещается / 20 сообщений из 20, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 566ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1449515]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 236ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 72ms
get tp. blocked users:
 2ms
others: 205ms
total:  566ms
x
x
Закрыть


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