css - 如何将 "form"放在同一行？

Question

所以我想要实现的是我有这样的东西:

----------------------------------
     Weekend: from 9am to 1pm
     Summer:  from 8am to 3pm
     Winter:  from 9am to 1pm
----------------------------------

这样我的左边和右边就对齐了。这是我的 fiddle : https://jsfiddle.net/7vdbLcL9/5/

    <div class="working-time">

        <div class="working-time-details">  
        <div class="working-time-title">WORKING HOURS</div>
            <div><span>WINTER:</span>  <span>from 9am to 4pm</span></div>
            <div><span>WEEKEND:</span> <span>from 9am to 1pm</span></div>
            <div><span>SUMMER:</span>  <span>from 9am to 7pm</span></div>
            <div><span>WEEKEND:</span> <span>from 10am to 2pm</span></div>
        </div>
    </div>

Answer 1

您可以使用此代码修复第一个跨度宽度 .working-time-details div span:first-child{display: inline-block;width: 85px;}

.working-time{
  width: 95%;
  border:1px solid black;
  text-align:center;
  color:gray;
}
.working-time-details{
  display:inline-block;
  text-align:left;
  line-height: 22px;
}
.working-time-title{
  color:white;
  margin-top:20%;
  margin-bottom:10%;
}
.working-time-title span{
  float:right;
  width: 100px;
}

.working-time-details div span:first-child{display: inline-block;width: 85px;}

<div class="working-time">
  <div class="working-time-details">	
    <div class="working-time-title">WORKING HOURS</div>
    <div><span>WINTER:</span>  <span>from 9am to 4pm</span></div>
    <div><span>WEEKEND:</span> <span>from 9am to 1pm</span></div>
    <div><span>SUMMER:</span>  <span>from 9am to 7pm</span></div>
    <div><span>WEEKEND:</span> <span>from 10am to 2pm</span></div>
  </div>
</div>