Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как вертикально выровнять текст в list-е? / 8 сообщений из 8, страница 1 из 1
14.08.2018, 14:58
    #39687530
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
Есть такое дерево горизонтальное с дочками
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
<ul>
   <li><span>id:1</span><span>name:First</span><span>kod:001</span></li>
   <li><span>id:123</span><span>name:FirstSecondThird</span><span>kod:000123</span></li>
   <li><span>id:1234</span><span>name:FirstSecondThird4etyre</span><span>kod:0001234</span>
         <ul>
              <li><span>id:12340</span><span>name:FirstSecondThird4etyreNOL</span><span>kod:00012340</span></li>
         </ul
   </li>
</ul>



Как выровнять вертикально id под id name под name ...?
как столбцы чтобы были.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2018, 17:25
    #39687666
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
qwerty2012Как выровнять вертикально id под id name под name ...?
Оно?

Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
li > span {
	display: block;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<ul>
   <li><span>id:1</span><span>name:First</span><span>kod:001</span></li>
   <li><span>id:123</span><span>name:FirstSecondThird</span><span>kod:000123</span></li>
   <li><span>id:1234</span><span>name:FirstSecondThird4etyre</span><span>kod:0001234</span>
         <ul>
              <li><span>id:12340</span><span>name:FirstSecondThird4etyreNOL</span><span>kod:00012340</span></li>
         </ul
   </li>
</ul>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.08.2018, 17:44
    #39687676
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
qwerty2012вертикально id под id name под name ...?
Эва...

Как вариант
Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
li > span {
	display: inline-block;
}
li > span:nth-child(1) {
	width: 100px;
}
li > span:nth-child(2) {
	width: 300px;
}
li > span:nth-child(3) {
	width: 100px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<ul>
   <li><span>id:1</span><span>name:First</span><span>kod:001</span></li>
   <li><span>id:123</span><span>name:FirstSecondThird</span><span>kod:000123</span></li>
   <li><span>id:1234</span><span>name:FirstSecondThird4etyre</span><span>kod:0001234</span>
         <ul>
              <li><span>id:12340</span><span>name:FirstSecondThird4etyreNOL</span><span>kod:00012340</span></li>
         </ul
   </li>
</ul>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2018, 11:15
    #39687926
qwerty2012
qwerty2012
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
krvsa,

вот как второй вариант но только чтобы не задавать жестко ширину колонки а по максимальному длинному тексту и до какото предела ширины(достигнув которого делать перенос )

Спасибо за внимание
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2018, 14:57
    #39688184
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
qwerty2012вот как второй вариант но только чтобы не задавать жестко ширину колонки а по максимальному длинному тексту и до какото предела ширины(достигнув которого делать перенос )
Такое может делать только таблица...

Но у тебя есть вложенные "таблицы", а этого уже так просто не сделать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2018, 15:01
    #39688187
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
Вот "как таблица"...

Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
ul {
	display: table;
}
li {
	display: table-row;
}
span {
	display: table-cell;
	padding: 5px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul>
   <li><span>id:1</span><span>name:First</span><span>kod:001</span>
   </li>
   <li><span>id:123</span><span>name:FirstSecondThird</span><span>kod:000123</span>
   </li>
   <li><span>id:1234</span><span>name:FirstSecondThird4etyre</span><span>kod:0001234</span>
   </li>
</ul>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.08.2018, 18:05
    #39688326
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
krvsa,

А нафига строчки с 5 по 9-ю? %)))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.08.2018, 10:24
    #39689293
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как вертикально выровнять текст в list-е?
ShSergeА нафига строчки с 5 по 9-ю? %)))
Ты про закомментированные строки?

Просто шаблон на все случаи сразу. Просто достаешь если нужно и все.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как вертикально выровнять текст в list-е? / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 128ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1444076]:
 0ms
get settings:
 8ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 28ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 13ms
total:  128ms
x
x
Закрыть


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