html - 将按钮 div 放在表格 div 旁边
问题描述
我创建了一个表和一个按钮。我正在尝试将按钮 div 与名为 .wrap-table 的类对齐到表 div 的右侧,但它没有正确对齐。
我使用 float:left 属性到按钮类,但它在表格下方对齐而不是在表格右侧
是否有任何我错过的属性要添加到 css 中?
请帮忙。
body{
overflow: hidden;
}
.wrap-table100 {
width: 60%;
}
.table100 {
background-color: #fff;
}
table {
width: 100%;
}
th, td {
font-weight: unset;
padding-right: 10px;
text-align: left;
}
.column1 {
width: 25%;
padding-left: 40px;
}
.column2 {
width: 20%;
}
.column3 {
width: 20%;
}
.column4 {
width: 20%;
}
.table100-head th {
padding-top: 10px;
padding-bottom: 12px;
}
.table100-body td {
padding-top: 16px;
padding-bottom: 16px;
}
/*==================================================================
[ Fix header ]*/
.table100 {
position: relative;
padding-top: 60px;
}
.table100-head {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.table100-body {
max-height: 400px;
overflow: auto;
}
.table100.ver2 .table100-head {
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
}
.table100.ver2 th {
font-family: Lato-Bold;
font-size: 18px;
color: #fa4251;
line-height: 1.4;
background-color: transparent;
}
.table100.ver2 td {
font-family: Lato-Regular;
font-size: 15px;
color: #808080;
line-height: 1.4;
}
.table100.ver2 .table100-body tr {
border-bottom: 1px solid black;
}
/*---------------------------------------------*/
.table100.ver2 {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
}
/* scrollbar body */
.js-pscroll {
position: relative;
overflow: scroll;
}
<div class="wrap-table100">
<div class="table100 ver2 m-b-110">
<div class="table100-head">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Name</th>
<th class="cell100 column2">Date</th>
<th class="cell100 column3">Type</th>
<th class="cell100 column4">Status</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body js-pscroll" >
<table>
<tbody >
<tr class="row100 body"style="border-bottom:1px solid black" >
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="dropdown">
<button type="button" class="dropbtn">dropdown menu</button>
</div>
解决方案
好吧,您的问题出在您的 HTML 结构下,您必须将按钮 div 移动到主容器下,而不是带类的 div 下,wrap-table100
因此由于您已经使用 flexbox,因此无需使用 float 并且行 flex 容器将为您完成工作.
body {
overflow: hidden;
}
.container-table100 {
width: 100%;
min-height: 100vh;
background-color: #f4f5f7;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 33px 30px;
}
.wrap-table100 {
width: 60%;
}
.table100 {
background-color: #fff;
}
table {
width: 100%;
}
th,
td {
font-weight: unset;
padding-right: 10px;
text-align: left;
}
.column1 {
width: 25%;
padding-left: 40px;
}
.column2 {
width: 20%;
}
.column3 {
width: 20%;
}
.column4 {
width: 20%;
}
.table100-head th {
padding-top: 10px;
padding-bottom: 12px;
}
.table100-body td {
padding-top: 16px;
padding-bottom: 16px;
}
/*==================================================================
[ Fix header ]*/
.table100 {
position: relative;
padding-top: 60px;
}
.table100-head {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.table100-body {
max-height: 400px;
overflow: auto;
}
.table100.ver2 .table100-head {
box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
}
.table100.ver2 th {
font-family: Lato-Bold;
font-size: 18px;
color: #fa4251;
line-height: 1.4;
background-color: transparent;
}
.table100.ver2 td {
font-family: Lato-Regular;
font-size: 15px;
color: #808080;
line-height: 1.4;
}
.table100.ver2 .table100-body tr {
border-bottom: 1px solid black;
}
/*---------------------------------------------*/
.table100.ver2 {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
}
/* scrollbar body */
.js-pscroll {
position: relative;
overflow: scroll;
}
<div class="container-table100">
<div class="wrap-table100">
<div class="table100 ver2 m-b-110">
<div class="table100-head">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Name</th>
<th class="cell100 column2">Date</th>
<th class="cell100 column3">Type</th>
<th class="cell100 column4">Status</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body js-pscroll">
<table>
<tbody>
<tr class="row100 body" style="border-bottom:1px solid black">
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Kavya</td>
<td class="cell100 column2">01-01-2000</td>
<td class="cell100 column3">Datamodel</td>
<td class="cell100 column4">completed</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="dropdown">
<button type="button" class="dropbtn">dropdown menu</button>
</div>
</div>
推荐阅读
- javascript - 如何在 javascript/jquery 中拼接数组中的值?
- excel-formula - 比较两张纸
- python - Python:将excel文件转换为JSON格式
- android-layout - Android NavigationView抽屉设置最小拖动量打开
- typescript - 如何在打字稿而不是javascript中使用剃刀代码
- python - 在熊猫中对相同的列名进行分组
- angular - 如何显示最高值
- javascript - 在 div 外部单击无法关闭 iphone 中的切换栏菜单
- c# - 可编辑的按钮文本
- javascript - UnhandledPromiseRejectionWarning:此错误源于在没有 catch 块的情况下抛出异步函数内部