Не умный вопрос по вёрстке ¯\_(ツ)_/¯

5

Drujba

23 апреля 2018, 07:33

718

Эмм, надеюсь я не ошибся адресом :)

Как сверстать верхнюю линию меню без использования flex, что бы при сужении экрана пространство между блокам динамично сжималось?

S

171

silicoid

23 апреля 2018, 07:54

#1

пара идей


<div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

вариант 1. олдскульный

.wrapper{
    display:table;
    width:100%;
}
.item{
    display:table-cell;
    width:33%;
    /* в данном случае, можно и без width, но тогда ширина будет не одинаковой */
    text-align:center;
    verical-align:top;
}

вариант 2. чуть новее

.wrapper{
    display:block;
    position:relative;
    letter-spacing:-0.3em;
}
.item{
    display:inline-block;
    position:relative;
    letter-spacing:normal;
    text-align:center;
    verical-align:top;
    width:33%;
}

вообще, в данном случае придется в шаблоне рассчитывать ширину, если кол-во пунктов меню != const

175

toxic steel

23 апреля 2018, 07:55

#2

Я бы сверстал списком, где LI - display: inline-block, а UL - text-align: justify

Есть отличные, недорогие рекламные места на агрофоруме (http://farmerforum.ru/viewtopic.php?t=1725)! Клуб истинных ценителей денег (http://coinshunter.ru/).

D

5

Drujba

23 апреля 2018, 08:25

#3

пара идей

Спасибо за идеи =D

Я бы сверстал списком, где LI - display: inline-block, а UL - text-align: justify

Не очень вас понял, там ведь не только li, да и всё расплывётся абы как.

175

toxic steel

23 апреля 2018, 08:42

#4


<html>                                                                  

<head>                                                              

	<meta charset="utf-8">

	<style>



		ul {

		padding: 0;

			text-align: justify;

			-moz-text-align-last: justify;

			text-align-last: justify;	

			background: #f2f2f2; 

		}



		li {

			display: -moz-inline-stack;

			display: inline-block;

			*display: inline;

		}



	</style>



</head>



<body> 

	<ul>

		<li>Главная</li>

		<li>Новости</li>

		<li>Товар</li>

		<li>Контакты</li>

	</ul>

</body>

</html>

D

5

Drujba

23 апреля 2018, 08:43

#5

silicoid:
вариант 1. олдскульный

тут приходиться во втором айтеме задавать ссылкам боковой margin, и он ломает всю красоту при горизонтальным сужением.

пространства.

silicoid:
вариант 2. чуть новее

Если задавать значение 33%, то левый и правый блоки занимаю слишком много

пространства (оно всё конечно понятно, подобрать каждому блоку нужный процент). В этом варианте с марджином тоже самое :)

http://i104.fastpic.ru/big/2018/0423/cd/e6102e1e8edc2e175a38b41a2e3f7acd.jpg

(Но за ответы я всё равно благодарен, т.к. до этого единственной альтернативой для меня были флоаты)

S

171

silicoid

23 апреля 2018, 11:07

#6

Drujba, Смотрите.

такая олдскульная (потому, что работает даже на ИЕ8) верстка требует несколько большей вложенности

<div class="header__wrapper">

    <div class="logo__wrapper">

    </div>

    <div class="menu__wrapper">

         <div class="menu__items">

            <div class="menu__item">1</div>

            <div class="menu__item">2</div>

            <div class="menu__item">3</div>

            <div class="menu__item">4</div>

        </div>

    </div>

    <div class="social__wrapper">

    </div>

</div>

.header__wrapper {

    display:table;

    width:100%;

}



.social__wrapper,

.menu__wrapper,

.logo__wrapper{

    display:table-cell;

    text-align:left;

    vertical-align:top;

}



.social__wrapper,

.logo__wrapper{

     width:300px;

     min-width:300px;

    max-width:300px;

}



.menu__items{

    display:table;

}

.menu__item{

    display:table-cell;

    width:25%;

}

в принципе, вы можете рассчитать размер menu__item на серверной стороне, и дале добавить его как инлайн стиль.

это, конечно, костыль. Но на безрыбье.

IP

0

IvanPeternel

23 апреля 2018, 11:08

#7

text-align: justify; в inline-block сработает только при добавлении псевдоэлемента (after или before), потому как это свойство выравнивает содержимое по всей ширине кроме последнего элемента (его ровняет по левому краю).

То есть при 2-х строчках - первая растягивается на всю ширину, вторая по левому краю.

Псевдоэлемент заменяет как-бы вторую строчку.


<html>

<head>       

	<meta charset="utf-8">

	<style>



		ul {

			text-align: justify;

			background: #f2f2f2; 

		}



		ul::after {

			display: inline-block;

			width: 100%;

			content:'';

		}



		li {

			display: inline-block;

		}



	</style>

</head>

<body> 

	<ul>

		<li>Главная</li>

		<li>Новости</li>

		<li>Товар</li>

		<li>Контакты</li>

	</ul>

</body>

</html>

Боковыми паддингами или маржинами для li можете задать минимальное расстояние между ними.

D

5

Drujba

24 апреля 2018, 12:02

#8

toxic steel, не сработало

http://i105.fastpic.ru/big/2018/0424/9d/fc58a5621c34b0e137eeaebc5f55cc9d.jpg

IvanPeternel:
text-align: justify; в inline-block сработает только при добавлении псевдоэлемента (after или before)

Теперь сработало)))

silicoid:
такая олдскульная

Значение в процентах почему то не работает. (в пикселях работает.)

http://i105.fastpic.ru/big/2018/0424/b9/944cd1cb00ce8c54e31c9422087663b9.jpg

175

toxic steel

24 апреля 2018, 13:02

#9

Drujba:
toxic steel, не сработало

А то, что стиль, который я запостил и который вы продемонстрировали на скриншоте в окружении рекламы с пиписьками, мягко говоря, различаются, вас не смущает? :)

D

5

Drujba

24 апреля 2018, 23:02

#10

toxic steel, Я подумал это префиксы xD

(P.S. у меня там нету рекламы с пиписьками...хмм...)

Что такое Power BI и зачем это нужно бизнесу

Open AI тестирует память для ChatGPT