在下面的代码中，我面临以下问题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>
答案 0 :(得分：0)
使用浮点数时添加clear:both，使用浮点数时父div不会占用高度，因此请使用clear：both将其清除。
clear属性与浮点数直接相关。如果该元素可以水平放置在浮动的另一个元素旁边的空间中，则它将。除非您在与float相同的方向上对该元素应用clear。然后该元素将向下移动到浮动元素下方。
纯粹出于代码可读性的考虑，最好将名称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>
答案 1 :(得分：0)
如果您可以将.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>