Question

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

    <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>

所以我已经对齐左侧和右侧。这是我的小提琴： https://jsfiddle.net/7vdbLcL9/5/

usleep(500000);
for ( i=0; i<20; i++) {
  myglobal=myglobal+1;
  printf("o");
  fflush(stdout);
  sleep(1);
}

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>

Answer 2

试试这个https://jsfiddle.net/q0dexosq/

<强> HTML

<div class="working-time">

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

<强> CSS

.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;
    width: 250px;
}
.working-time-title{
    color:black;
    margin-top:20%;
    margin-bottom:10%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

Answer 3

这是你要找的东西：https://jsfiddle.net/7vdbLcL9/12/？

我刚刚添加了一个选择器：working-time-details span.time和一个＆＃34; time＆＃34;。

CSS：

.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;
    width: 228px;
}
.working-time-title{
    color:white;
    margin-top:20%;
    margin-bottom:10%;
}
.working-time-details span.time {
    float: right;
}

HTML：

<div class="working-time">

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

Answer 4

您可以为每个跨度添加类并向左浮动一个，并将另一个浮动到右侧。这样你就不必担心有任何固定的宽度。

<div><span class="float-left">WINTER:</span>  <span class="float-right">from 9am to 4pm</span></div>
<div><span class="float-left">WEEKEND:</span> <span class="float-right">from 9am to 1pm</span></div>
<div><span class="float-left">SUMMER:</span>  <span class="float-right">from 9am to 7pm</span></div>
<div><span class="float-left">WEEKEND:</span> <span class="float-right">from 10am to 2pm</span></div>

这是相应的css：

.float-right {
    float: right;
}
.float-left {
    float: left;
}

这是一个更新的jsfiddle： https://jsfiddle.net/7vdbLcL9/13/

如何将“形式”放在同一行？

4 个答案: