Проблема с полями CSS для идентификаторов DIV

Question

В приведенном ниже коде я столкнулся с проблемами ниже 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>

html css

-1

acr 27 Май 2019 в 15:27

Answer 1

Добавьте 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>

0

Hiren Vaghasiya 27 Май 2019 в 12:47

Answer 2

Если вы можете изменить ширину .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>

0

Nishant Jain 27 Май 2019 в 12:48

Проблема с полями CSS для идентификаторов DIV

2 ответа

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

Новые вопросы

html