我正在尝试垂直对齐我的按钮,但我似乎无法让它在下面是我正在使用的 css 中工作。
我尝试过 position
、vertical-align
等,但没有任何效果。
有人可以帮我吗?
参考这里是我要去的图片:
.item-card {
display: block;
font-family: Titillium Web, sans-serif;
box-shadow: rgba(0, 0, 0, 0.15) 0 5px 20px;
}
.item-card:focus {
border: #b20c1c solid;
}
.item-card:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}
.justified-list {
padding: 5px;
width: 100%;
margin: 0;
}
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
button:hover:active:focus {
background-color: white;
color: #61070f;
}
.jl-item {
padding: 10px 10px 10px;
display: block;
}
.jl-item:focus {
border: #61070f solid;
}
.btn-hent-pass {
color: #b20c1c;
text-decoration: none;
}
.float {
max-width: 1200px;
margin: 0 auto;
}
.float:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.last {
float: right;
}
<div class="item-card float">
<ul class="justified-list">
<li class="jl-item float-item" tabindex="0">06/12/2022</li>
<li class="jl-item float-item" tabindex="0" *ngIf="additionalText.length > 0">1/2</li>
<li class="jl-item last float-item"><button class="btn-hent-pass" (click)="btnClick.emit()" ><span style="margin-right: 5px">Get Data</span></button>
</li>
</ul>
</div>
答案 0 :(得分:2)
Div 元素是 display: “block” 这意味着它们占据页面的整个宽度。
要修复您的排列,您将需要某种网格布局或弹性容器。
更新:由于 OP 的要求,对于旧版支持的网格,您可以找到更多信息 here
一个简单的例子...
HTML:
<div class="row">
<ul class="col-1">
<li>test</li>
<li>test 2</li>
</ul>
<button class="col-2">
Get Data
</button>
</div>
CSS:
.row {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.col-1 {
width: 40%;
float: left;
}
.col-2 {
width: 40%
float: right;
}