<a href=""> coming before span in css

Question

I am creating a jobs page and was just making this when I ran across what I think is a styling problem.

If you look at the image below you can see the Apply button comes before the time and city but I want the Apply button to be farthest to the left but it will not position that way which only led me to believe this is a styling error on my part. Does anybody know why this would be? Code posted below.

HTML 的

<div class="job-case">
    <h4>iOS Engineer</h4>
    <span>Chicago</span>
    <a href="#">Apply</a>
</div>

CSS

.job-case {
    height: 0 auto;
    width: 0 auto;
    background-color: white;
    margin: 10px;
    padding: 0 auto;
    border-radius: 5px;
    border: 1px solid none;;
}
.job-case:hover {
    background-color: #F3EFF5;
    border-color: #212121;
}
.job-case h4 {
    color: #212121;
    font-weight: bold;
    font-size: 20px;
    display: inline-block;
    padding-left: 30px;
}
.job-case a {
    float: right;
    height: 0 auto;
    margin-top: 17px;
    padding: 10px;
    color: #72b01d;
    background-color: none;
    border: 2px solid #72b01d;
    border-radius: 5px;
}
.job-case a:hover {
    background-color: #72b01d;
    border-color: #72b01d;
    color: white;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.job-case span {
    float: right;
    padding: 30px;
    font-weight: bold;
    font-size: 15px;
    color: #212121;
}

Answer 1

这不是造型问题。当他们在兄弟姐妹上使用float:right时，他们会按照他们在DOM中的顺序向右移动。所以带float:right的第一个将转到最右边。

因此您需要更改html并将a放在span

之前

<div class="job-case">
    <h4>iOS Engineer</h4>
    <a href="#">Apply</a>
    <span>Chicago</span>
</div>

https://jsfiddle.net/g8kuve66/

演示

引用float specification

  

浮动框向左移动或向右移动，直到其外边缘接触包含块边缘或另一个浮动边缘的外边缘。如果有行框，则浮动框的外部顶部与当前行框的顶部对齐。