html - <a href> coming before span in css -
i creating jobs page , making when ran across think styling problem.
if @ image below can see apply button comes before time , city want apply button farthest left not position way led me believe styling error on part. know why 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 { 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: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .job-case span { float: right; padding: 30px; font-weight: bold; font-size: 15px; color: #212121; }
it not styling issue. when using float:right
on siblings stack , go right in order in dom. first 1 float:right
go farthest right.
so need change html , put a
before span
<div class="job-case"> <h4>ios engineer</h4> <a href="#">apply</a> <span>chicago</span> </div>
demo @ https://jsfiddle.net/g8kuve66/
quoting float
specification
a floated box shifted left or right until outer edge touches containing block edge or outer edge of float. if there line box, outer top of floated box aligned top of current line box.
Comments
Post a Comment