Каким образом расположить поиск в шапке справа?

Question

[game802]

Добрый вечер уважаемые знатоки. Никак не получается правильно сделать то, что заданно на макете:

У меня получается что-то вроде этого...

Никак не могу разобраться с меню... я написал что-то вроде этого:

<ul class="menu">
	<li><a href="#"><img src="src/images/icons/icon-01.svg"> Деревянные игрушки</a></li>
	<li><a href="#"><img src="src/images/icons/icon-02.svg"> Кинетический песок</a></li>
	<li><a href="#"><img src="src/images/icons/icon-03.svg"> Пластилин Play-Doh</a></li>
	<li><a href="#"><img src="src/images/icons/icon-04.svg"> Бомик</a></li>
	<li><a href="#"><img src="src/images/icons/icon-08.svg"></a></li>
</ul>

.menu {
	list-style-type: none;
	display: inline-block;
	background: #8fa7e4;
	width: 100%;
}

.menu li {
	text-align: center;
	float: left;
	padding: 15px 7px 17px 86px;
}

.menu img {
	width: 46px;
    height: 46px;
	display: block;
	margin: 0 auto;
}

.menu a {
	font-weight: 600;
	display: block;
	color: white;
	text-transform: uppercase;
	font-size: 13px;
}

.menu a:hover {
	text-decoration: none;
	color: #fcee6a;
}

Кто нибудь может помочь в решении данного вопроса? Буду очень признателен за любую помощь! Спасибо!

Comments

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

[Archakov Dennis]

1. Не пихай в блок SVG и рядом просто текст. Все должно быть в каком-нибудь элементе, в том числе и текст.

<svg><path...></svg>
<span>Бомбик</span>

2. Вам в любом случае, надо вытащить из SVG файлов весь код и заменить его вместо img. После чего, вы сможете манипулировать SVG элементом. А точнее, задавать цвет линий или заливки. С помощью свойства fill: #fff;

3. Используйте выборку по номеру дочернего элемента или по last-child или first-child. В вашем случае, кнопка поиска это будет last-child.

ul > li:last-child {
float: right;
}

Comments

[game802]

вау, великолепная помощь! Я обязательно учту все эти моменты. Большое спасибо!