Question

我正在寻找为职业页边栏创建工作列表。每个作业都应包含作业标题和应用按钮。每个列表都包含在一个圆形的灰色框中，并留有一些间距。

我试图在下面的笔中创建它，希望有人可以查看我的代码并告诉我如何让按钮浮动到右边，标题和按钮在框内居中

我对css和html相当新，所以我不知道实现这个的最佳方法是什么？在上面的笔中，我使用了两种不同的选项。第一个使用div，h4和元素第二个使用div和无序列表。

注意：最终代码需要放在CMS（Hubspot）的模板中。 Hubspot有一些我无法使用的模板设计规则。（这样他们的模板保持响应）其中一个是元素。

这是我的代码：

<div class="box">
<h4>Business Development <br>
Manager</h4>
<a class="button" href="http://www.my-site.com/business-development-   manager">Apply</a>

</div>

<div class="box">
<ul>
<li><h4>Customer Support <br>Agent</h4></li>
<li><a class="button" href="http://www.my-site.com/business-development-manager">Apply</a></li>
</ul>
</div>

CSS代码：

p, h4, a, li {
font-family: 'Open Sans',sans-serif!important;
}
.box {
background: #f2f2f2;
border-radius: 4px;
padding: 1em 1em;
margin: 2em 0!important;
text-align: left;
}


h4, li {
font-weight: 300;
color: #07355C;
display: inline-block;
vertical-align: middle;
}

.button {
font-size: 1em!important;
padding: 5px 20px!important;
text-decoration: none;
-webkit-box-shadow: #e28b00 0 1px 0;
-moz-box-shadow: #e28b00 0 1px 0;
box-shadow: #e28b00 0 1px 0;
background-color: #f6ae2b;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6ae2b),color-     stop(70%,#f39d13));
background-image: -webkit-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: -moz-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: -o-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: linear-grad;
padding-left: 0;
padding-right: 0;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 10px 20px;
font-size: 18px;
border: none;
color: white;
display: inline-block;
vertical-align: middle;
float: right;
margin-right:1em;
}

.box ul {
margin: 0;
padding: 0;
list-style-type: none;
}

Answer 1

这是另一个想法。我的答案中没有提供代码，因为它太多了。主要是我刚添加了一些像包装器一样的网格

http://codepen.io/Nico_O/pen/ybjLE

试图对齐div内的元素

1 个答案: