css - css底部未定位在页面底部
问题描述
创建一个居中的按钮列表。不幸的是在页面的顶部。
<html>
<head>
<style>
#test {
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
底部:5em 不起作用的任何原因?
作为 css 的初学者,我将不胜感激任何关于为什么我还需要设置 .mybtn 使 css 工作的提示!
解决方案
只需放置position:relative
<html>
<head>
<style>
#test {
position: relative;
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
推荐阅读
- javascript - 搜索 ZipCode 网站 - 仅在第二次点击时才会出现结果
- android - android- 使用 customAction 调用 Activity
- css - CSS 响应式网格布局:grid-column span 打破 minmax
- angular - 是否仍应使用 Angular 设置 href 属性?
- scheme - 在方案中,是否有类似 apropos 命令的东西?
- sql - SQL 从滚动 ID 生成唯一 ID
- javascript - 如何将服务器端生成的新页面加载到 PhoneGap 或 Cordova 应用程序中?
- r - R falsely identifying abundance data as presence/absence data (fossil package)
- java - 用 replaceAll 删除部分字符串
- reactjs - 在 React 中映射组件后如何渲染组件集合