Как исправить проблему с тегом form?

Question

Денис Юламанов @DvDenis

HTML
CSS

Как исправить проблему с тегом form?

Всем привет! Я делаю сайт(магазин) и у меня возникла небольшая проблема при создании стилей.
Проблемный код:

<div class="main_container">
		<div class="left_container">
			<div class="left_nav">
				<form class="form_1">
					<input type="button" id="filter_all" name="filter_all" value="Все" class="filter_input">
					<input type="button" id="filter_male" name="filter_male" value="Мужская одежда" class="filter_input">
					<input type="button" id="filter_female" name="filter_female" value="Женская одежда" class="filter_input">
					<input type="button" id="filter_gifts" name="filter_gifts" value="Сувениры" class="filter_input">
				</form>
			</div>

		</div>
		<div class="middle_container">
			<div class="goods_list">
				<div class="filter_cost">	
					<form class="form_2">
						<input type="button" name="filter_cost_hight" value="По убыванию">
						<input type="button" name="filter_cost_low" value="По возрастанию">
					</form>
				</div>
				<div class="grid_product">
					<?
					if ($goods_list_result) {
						
						include 'goods_out.php';

					}
					?>
				</div>
			</div>
		</div>
	</div>

Где используются стили:

.left_container {
	margin-left: 30px;
	width: 200px;
	height: 100vh;
	display: inline-block;
}

.left_nav .filter_input {
	display: block;
	background-color: #fff;
	color: #a3a3a3;
	margin-bottom: 10px;
	font-family: nav_font;
}

.left_nav .filter_input:hover {
	color: #5e5e5e;
	cursor: pointer;
}

.middle_container {
	display: inline-block;
	width: calc(100% - 235px);
	min-height: 100vh;
}

.filter_cost {
	width: 100%;
}
.filter_cost form {
	text-align: right;
	padding-right: 70px;
}

.filter_cost input {
	margin-right: 30px;
	cursor: pointer;	
	font-family: nav_font;
	color: #a3a3a3;
	font-size: 13px;
	background-color: #fff;
	padding-top: 5px;
	border-bottom: 1px #a3a3a3 solid;
}

.filter_cost input:hover {
	color: #636363;
}

Получается такая ситуация

Где выделенная черным подчеркиванием часть input должны находиться выше(линия указана), как это исправить и почему это произошло?

Вопрос задан более трёх лет назад
74 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

Денис Юламанов @DvDenis Автор вопроса

Простите, а для какого случая тогда inline_block? Просто она кажется ставит в одну строку. Что за ux?

input type="button" - это скорее всего ссылки должны быть. возможно js их будет переопределять, но при потере функционала я должен иметь возможность перейти в раздел мужской одежды к примеру.

т.е вы имеете ввиду что данный способ не сработает когда я перейду в раздел с мужской одеждой?

Почему это произошло?

Написано более трёх лет назад
Froggyweb @Froggyweb

т.е вы имеете ввиду что данный способ не сработает когда я перейду в раздел с мужской одеждой?
если по какойто причине не будет работать js , то нет. да и семантически это ссылка на раздел.

Если нужна форма для фильтра лучше использовать тогда чекбокс или радиобуттоны

инлайн блоки не предназначены для лайаута и построения сетки. Это самый извращенный способ. float и то на несколько порядков лучше.

Написано более трёх лет назад

Денис Юламанов @DvDenis Автор вопроса

Froggyweb, Вот тут я переделал часть кода, с CSS:

<!DOCTYPE html>
<html>
<head>
	<title>RAPTORIA SHOP</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="main_wrapper">
		<div class="header">
			<div class="header_logo">
				<img src="img_design/logo.png">
			</div>
			<div class="header_right_menu">
				<div class="nav_menu">
					<a href="" class="btn">Магазин</a>
					<a href="" class="btn">Информация</a>
					<a href="" class="btn">Контакты</a>
					<a href=""><img src="img_design/basket.png"></a>
				</div>
			</div>
		</div>
		<div class="content_wrapper">
			<div class="left_header"></div>
			<div class="main_content"></div>
		</div>
		<div class="footer">
			<div class="footer_vk">
				<a href=""><img src="img_design/vk.png"></a>
			</div>
		</div>
	</div>
</body>
</html>

Стили:

* {
	padding: 0;
	margin: 0;
	text-decoration: none;
}

.main_wrapper {
	width: 100%;
}

.header {
	display: flex;
	flex: 100%;
	min-height: 150px;
}

.header_logo {
	padding: 15px;
	padding-left: 25px;
}

.header_logo img {
	width: 150px;
}

.header_right_menu {
	flex-grow: 1;
	text-align: right;
}

.nav_menu {
	margin: 70px;
	margin-right: 125px;: 
}

.nav_menu a {
	font-family: nav_font;
	margin-left: 25px;
	color: #828282;
}

.nav_menu a:hover {
		border-bottom: 2px solid #828282;
	}

.nav_menu img {
	width: 20px;
}

.nav_menu .nav_menu_btn {
	width: 30px;
	display: none;
}

.content_wrapper {
	width: 100%;
	min-height: 100vh;
	display: flex;
}

.left_header {
	flex: 0 0 200px;
	flex-direction: row;
	min-height: 100vh;
}

.main_content {
	flex: 0 0 calc(100% - 200px);
	min-height: 100vh;
}

.footer {
	width: 100%;
	min-height: calc(100vh - 200px);
	text-align: center;
}

.footer_vk {
	margin-top: 100px;
}

.footer_vk img{
	width: 50px;
}
@media screen and (max-width: 800px) {
	.header {
		min-height: 150px;
		flex-wrap: wrap;
	}

	.header_logo {
		text-align: center;
		width: 100%;
	}

	.header_right_menu {
		text-align: center;
	}

	.nav_menu {
		margin: 25px;
	}

	.nav_menu .nav_menu_btn {
		width: 30px;
	}

	.nav_menu a {
		font-family: nav_font;
		margin-right: 10px;
	}

	.nav_menu a:hover {
		border-bottom: 2px solid #5dd14b;
	}

	.nav_menu a:last-child {
		margin-right: 0px;
	}


	.content_wrapper {
		display: block;
	}

	.left_header {
		min-height: 150px;
	}
}

Вот так будет правильнее?

Вот эту чать

.content_wrapper {
		display: block;
	}

не получается сделать через flex-wrap: wrap;

Написано более трёх лет назад

Froggyweb @Froggyweb

Денис Юламанов, * {
padding: 0;
margin: 0;
text-decoration: none;
}
Этот кусок следует убрать или заменит на normalise.css

Ссылкам в меню стоит дать класс мало ли нужны будут ссылки с другим поведением

Блокам контейнером хорошо бы дать справа слева паддинги чтобы контент не прилипал к краям на мобилках

Слишком много minheight не думаю что это необходимо.

Написано более трёх лет назад
Денис Юламанов @DvDenis Автор вопроса

Froggyweb, Вот у меня еще одна проблема возникла, в блоках header, left_header и main_content содержимое внутри уходит за её границы, кажется это исправляет с flex-wrap: wrap;? Если да, то куда её нужно поставить?

Написано более трёх лет назад
Froggyweb @Froggyweb

Я на телефоне, поэтому проверить код не могу. Свойство флексврап ставится на блок у которого объявлен display:flex влияет на прямых потомков блока, позволяя их переносить на другую строку или колонку

Написано более трёх лет назад
Froggyweb @Froggyweb

Денис Юламанов, вообще найди какойнибудь playgraund flexbox и посмотри как работают свойства флекс

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- 16 часов назад
- 33 просмотра
0

ответов
PHP

+2 ещё

Средний
Проблема с отображением данных о городах из таблицы в запросе SQL?
- 1 подписчик
- вчера
- 50 просмотров
1

ответ
HTML

+1 ещё

Простой
Как применить nth-child?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
HTML

Простой
Не могу задать ширину таблицы html?
- 1 подписчик
- 07 мая
- 72 просмотра
1

ответ
CSS

+1 ещё

Простой
Daysi UI — изменить цвет, icon навигационного меню?
- 1 подписчик
- 06 мая
- 44 просмотра
1

ответ
HTML

+1 ещё

Простой
Как сделать так, чтобы содержимое defs работало?
- 1 подписчик
- 06 мая
- 50 просмотров
0

ответов
CSS

Простой
Как удалить все префиксы из css?
- 1 подписчик
- 06 мая
- 83 просмотра
1

ответ
HTML

+1 ещё

Простой
Выровнить картинку по центру в тексте, чтобы не зависимости всегда была по центру?
- нет подписчиков
- 05 мая
- 96 просмотров
1

ответ
CSS

Простой
Как создать нормальный размер картинки на php?
- 1 подписчик
- 05 мая
- 72 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Галерея через сборку строки JS не позиционируется?
- 1 подписчик
- 05 мая
- 113 просмотров
0

ответов
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать технические условия на электротехническую продукцию

10 мая 2024, в 10:47

1000 руб./за проект

Парсинг интернет магазина

10 мая 2024, в 09:30

500 руб./за проект

Исправить код шахмат на С++ с использованием библиотеки winbgim

10 мая 2024, в 05:53

2000 руб./за проект

Получается так, что вторая форм как то привязывается к первой, даже если они находятся в разных блоках. При удалении первой формы вторая встает куда надо.

Answer 1 · 2020-01-09 21:23:59

.main_container {
display: flex;
}
остальную ересь убить. inline-block точно не для этого случая. Кнопки имеют очень маленький контраст. это хреново для ux

input type="button" - это скорее всего ссылки должны быть. возможно js их будет переопределять, но при потере функционала я должен иметь возможность перейти в раздел мужской одежды к примеру.

Как исправить проблему с тегом form?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт