如何在div中插入两个内联按钮(css)?
这个问题在这里已经有了答案:
我对班级名称进行了一些更改(删除了空格)并放置了一些边界,以便您更好地理解div的放置。 代码如下:
<html>
<head>
<style>
.jumbotron-hub-jumbo {
margin: 0 auto;
border:2px solid black;
width:300px;
}
.hub-btns {
margin: 0 auto;
width:200px;
border:2px solid green;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
width:200px;
border: 2px solid red;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="jumbotron-hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
</div>
</div>
</body>
</html>
没有看到你想要做的事情,帮助有点棘手。 添加text-align: center;
在.hub-btns
应该足以将这些按钮居中对齐。
另外,我可能会移动margin: 0 10px;
到.hub-btns
而不是直接应用锚点/按钮。
最后,如果您不需要支持旧浏览器,请尝试投入一些时间来学习flexbox的基础知识。 它让我们的生活在“对齐事物”方面变得更加轻松。
链接地址: http://www.djcxy.com/p/13221.html