В приведенном ниже коде я столкнулся с проблемами ниже div expenses_div
. Я добавил margin-top:3%;
для него, но почему-то он не работает.
Кроме того, expenses_div
находится внутри container_input
. но ширина expenses_div
превышает значение, установленное для container_input
(60% ширины страницы). Я не могу понять проблему с expenses_div
.
Может кто-нибудь, пожалуйста, направьте меня сюда
.expenses_wrapper
{
width:100%;
text-align:center;
margin:auto;
margin-top:50px;
}
.expenses_banner
{
width:100% !important;
background-color:black;
position: relative;
text-align:center;
color:white;
padding:5px;
overflow:hidden !important;
font-family: "Montserrat",sans-serif !important;
font-size:20px;
position:fixed;
z-index: 105 !important;
}
.container_input
{
width:100%;
margin-top:5%;
text-align:center;
margin:auto;
}
.expenses_main_head
{
width:60%;
text-align:center;
padding-top:80px;
margin:auto;
}
.expenses_div
{
width:100% !important;
margin:auto;
margin-top:3%;
}
.expenses_div_left
{
height:40px;
line-height:40px;
background-color:black;
float:left;
display: inline-block;
text-align:left;
padding-left:12px;
color:white;
width:48%;
font-size: 14px !important;
font-family : "Montserrat",sans-serif !important;
}
.expenses_div_right
{
height: 40px !important;
line-height: 40px !important;
width:48%;
float:left;
display: inline-block;
cursor:pointer;
background:transparent !important;
position:relative;/*Added (Because :after should be relative to this not whole page! )*/
}
.expenses_div_right select
{
font-family : "Montserrat",sans-serif !important;
background:transparent !important;
appearance:none !important;
-moz-appearance:none !important;
-webkit-appearance:none !important;
box-sizing: border-box !important;
border: 1px solid black !important;
width:100%!important;
color:black !important;
height:40px;
text-align:left !important;
font-size: 14px !important;
outline: none;
position: relative !important;
cursor:pointer;
padding-left:12px;
z-index:2;
}
.expenses_div_right:after
{
content: '< >';
font: 16px "Consolas", monospace;
font-weight:bold;
color: white;
background-color:black;
display:inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;/*Changed to absolute*/
top:0;/*Added*/
right:0;/*Added*/
width:40px;
height:40px;
text-align:center;
line-height:40px;
overflow:hidden !important;
cursor:pointer;
z-index :1 ;/*Added ( For Your 2nd Question )*/
}
.expenses_input
{
height:40px !important;
line-height: 40px !important;
border: 1px solid black !important;
font-family : "Montserrat",sans-serif !important;
outline: none !important;
width:100%!important;
text-align:right;
display: inline-block;
font-size: 14px !important;
cursor:pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box !important;
-moz-appearance: none;
}
<div id="expenses_wrapper" class="expenses_wrapper" >
<div id="expenses_banner" class="expenses_banner" >Tracker</div>
<div class="container_input" id="container_input" >
<div class="expenses_main_head">
<div class="expenses_div_left" >How to Proceed</div>
<div id="expenses_div_right" class="expenses_div_right" >
<select name="expense_main_selection" id="expense_main_selection" >
<option selected value="">Select an option</option>
<option value="new_data">New Data</option>
<option value="analize_data">Analyze Data</option>
<option value="refresh_data">Refresh Data</option>
</select>
</div>
</div>
<div id="expenses_input_date" class="expenses_div" >
<div class="expenses_div_left" >Date</div>
<div class="expenses_div_right" ><input type="text" class="expenses_input" id="expenses_input_date" name="expenses_input_date" autocomplete="off"></div>
</div>
<div id ="expenses_select_account" class="expenses_div" >
<div class="expenses_div_left" >Select Account</div>
<div id="expenses_div_right" class="expenses_div_right" >
<select name="select_account" id="select_account_select">
<option selected value="">Select Account</option>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
</select>
</div>
</div>
</div>
</div>
2 ответа
Добавьте clear:both
, когда вы используете float, родительский div не принимает высоту, когда вы используете float, поэтому используйте clear: оба, чтобы очистить его.
Свойство clear напрямую связано с поплавками. Если элемент может поместиться горизонтально в пространстве рядом с другим плавающим элементом, он будет. Если вы не примените clear к этому элементу в том же направлении, что и float. Тогда элемент опустится ниже плавающего элемента.
Вероятно, рекомендуется хранить имена, отличные от class
и id
, исключительно для удобства чтения кода, но при этом проблем не будет.
.expenses_wrapper
{
width:100%;
text-align:center;
margin:auto;
margin-top:50px;
}
.expenses_banner
{
width:100% !important;
background-color:black;
position: relative;
text-align:center;
color:white;
padding:5px;
overflow:hidden !important;
font-family: "Montserrat",sans-serif !important;
font-size:20px;
position:fixed;
z-index: 105 !important;
}
.container_input
{
width:100%;
margin-top:5%;
text-align:center;
margin:auto;
}
.expenses_main_head
{
width:60%;
text-align:center;
padding-top:80px;
margin:auto;
}
.expenses_div
{
width:100% !important;
margin:auto;
margin-top:3%;
}
.expenses_div_left
{
height:40px;
line-height:40px;
background-color:black;
float:left;
display: inline-block;
text-align:left;
padding-left:12px;
color:white;
width:48%;
font-size: 14px !important;
font-family : "Montserrat",sans-serif !important;
}
.expenses_div_right
{
height: 40px !important;
line-height: 40px !important;
width:48%;
float:left;
display: inline-block;
cursor:pointer;
background:transparent !important;
position:relative;/*Added (Because :after should be relative to this not whole page! )*/
}
.expenses_div_right select
{
font-family : "Montserrat",sans-serif !important;
background:transparent !important;
appearance:none !important;
-moz-appearance:none !important;
-webkit-appearance:none !important;
box-sizing: border-box !important;
border: 1px solid black !important;
width:100%!important;
color:black !important;
height:40px;
text-align:left !important;
font-size: 14px !important;
outline: none;
position: relative !important;
cursor:pointer;
padding-left:12px;
z-index:2;
}
.expenses_div_right:after
{
content: '< >';
font: 16px "Consolas", monospace;
font-weight:bold;
color: white;
background-color:black;
display:inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;/*Changed to absolute*/
top:0;/*Added*/
right:0;/*Added*/
width:40px;
height:40px;
text-align:center;
line-height:40px;
overflow:hidden !important;
cursor:pointer;
z-index :1 ;/*Added ( For Your 2nd Question )*/
}
.expenses_input
{
height:40px !important;
line-height: 40px !important;
border: 1px solid black !important;
font-family : "Montserrat",sans-serif !important;
outline: none !important;
width:100%!important;
text-align:right;
display: inline-block;
font-size: 14px !important;
cursor:pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box !important;
-moz-appearance: none;
}
.clerafix{
clear:both;
}
<div id="expenses_wrapper" class="expenses_wrapper" >
<div id="expenses_banner" class="expenses_banner" >Tracker</div>
<div class="container_input" id="container_input" >
<div class="expenses_main_head">
<div class="expenses_div_left" >How to Proceed</div>
<div id="expenses_div_right" class="expenses_div_right" >
<select name="expense_main_selection" id="expense_main_selection" >
<option selected value="">Select an option</option>
<option value="new_data">New Data</option>
<option value="analize_data">Analyze Data</option>
<option value="refresh_data">Refresh Data</option>
</select>
</div>
<div class="clerafix"></div>
</div>
<div id="expenses_input_date" class="expenses_div" >
<div class="expenses_div_left" >Date</div>
<div class="expenses_div_right" ><input type="text" class="expenses_input" id="expenses_input_date" name="expenses_input_date" autocomplete="off"></div>
<div class="clerafix"></div>
</div>
<div id ="expenses_select_account" class="expenses_div" >
<div class="expenses_div_left" >Select Account</div>
<div id="expenses_div_right" class="expenses_div_right" >
<select name="select_account" id="select_account_select">
<option selected value="">Select Account</option>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
</select>
</div>
<div class="clerafix"></div>
</div>
</div>
</div>
Если вы можете изменить ширину .container_input
до 60%, это должно работать.
.expenses_wrapper {
width:100%;
text-align:center;
margin:auto;
margin-top:50px;
}
.expenses_banner {
width:100% !important;
background-color:black;
position: relative;
text-align:center;
color:white;
padding:5px;
overflow:hidden !important;
font-family: "Montserrat",sans-serif !important;
font-size:20px;
position:fixed;
z-index: 105 !important;
}
.container_input {
width: 60%;
margin-top:5%;
text-align:center;
margin:auto;
}
.expenses_main_head {
width:60%;
text-align:center;
padding-top:80px;
margin:auto;
}
.expenses_div {
width:100% !important;
margin:auto;
margin-top:3%;
}
.expenses_div_left {
height: 40px;
line-height: 40px;
background-color: black;
float: left;
display: inline-block;
text-align:left;
padding-left:12px;
color:white;
width:48%;
font-size: 14px !important;
font-family : "Montserrat",sans-serif !important;
}
.expenses_div_right {
height: 40px !important;
line-height: 40px !important;
width: 48%;
float: left;
display: inline-block;
cursor: pointer;
background: transparent !important;
position: relative;/*Added (Because :after should be relative to this not whole page! )*/
}
.expenses_div_right select {
font-family : "Montserrat",sans-serif !important;
background:transparent !important;
appearance:none !important;
-moz-appearance:none !important;
-webkit-appearance:none !important;
box-sizing: border-box !important;
border: 1px solid black !important;
width:100%!important;
color:black !important;
height:40px;
text-align:left !important;
font-size: 14px !important;
outline: none;
position: relative !important;
cursor:pointer;
padding-left:12px;
z-index:2;
}
.expenses_div_right:after {
content: '< >';
font: 16px "Consolas", monospace;
font-weight:bold;
color: white;
background-color:black;
display:inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;/*Changed to absolute*/
top:0;/*Added*/
right:0;/*Added*/
width:40px;
height:40px;
text-align:center;
line-height:40px;
overflow:hidden !important;
cursor:pointer;
z-index :1 ;/*Added ( For Your 2nd Question )*/
}
.expenses_input {
height:40px !important;
line-height: 40px !important;
border: 1px solid black !important;
font-family : "Montserrat",sans-serif !important;
outline: none !important;
width:100%!important;
text-align:right;
display: inline-block;
font-size: 14px !important;
cursor:pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box !important;
-moz-appearance: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="expenses_wrapper" class="expenses_wrapper">
<div id="expenses_banner" class="expenses_banner">Tracker</div>
<div class="container_input" id="container_input">
<div class="expenses_main_head">
<div class="expenses_div_left" >How to Proceed</div>
<div id="expenses_div_right" class="expenses_div_right">
<select name="expense_main_selection" id="expense_main_selection" >
<option selected value="">Select an option</option>
<option value="new_data">New Data</option>
<option value="analize_data">Analyze Data</option>
<option value="refresh_data">Refresh Data</option>
</select>
</div>
</div>
<div id="expenses_input_date" class="expenses_div" >
<div class="expenses_div_left" >Date</div>
<div class="expenses_div_right" ><input type="text" class="expenses_input" id="expenses_input_date" name="expenses_input_date" autocomplete="off"></div>
</div>
<div id ="expenses_select_account" class="expenses_div" >
<div class="expenses_div_left" >Select Account</div>
<div id="expenses_div_right" class="expenses_div_right" >
<select name="select_account" id="select_account_select">
<option selected value="">Select Account</option>
<option value="Opt1">Opt1</option>
<option value="Opt2">Opt2</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>
Похожие вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].