Css 如何把；表格「；在同一条线上？

因此，我试图实现的是，我有这样的东西：

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

这样我就可以把左边和右边对齐了。 这是我的小提琴：

工作时间
冬季：上午9点至下午4点
周末：上午9点至下午1点
夏季：上午9时至下午7时
周末：上午10点至下午2点

您可以使用此代码固定第一个跨度宽度

。工作时间详细信息div span:first child{display:inline block；width:85px；}

。工作时间{
宽度：95%；
边框：1px纯黑；
文本对齐：居中；
颜色：灰色；
}
.工作时间详情{
显示：内联块；
文本对齐：左对齐；
线高：22px；
}
.工作时间名称{
颜色：白色；
利润率最高：20%；
利润底部：10%；
}
.工作时间标题范围{
浮动：对；
宽度：100px；
}
.working time details div span:first child{显示：内联块；宽度：85px；}

工作时间
冬季：上午9点至下午4点
周末：上午9点至下午1点
夏季：上午9时至下午7时
周末：上午10点至下午2点

试试这个

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>

---

这就是你要找的吗

我刚刚添加了一个选择器：working time details span.time和一类“time”

CSS:

HTML:

工作时间
冬季：上午9点至下午4点
周末：上午9点至下午1点
夏季：上午9时至下午7时
周末：上午10点至下午2点

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

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

以下是更新的JSFIDLE：

---

在我看来像是表格数据，为什么不使用表格呢？@AlexChar它的左右不对齐你可以用它来快速解决问题，可能看起来很脏，但它只是几行代码。

.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;
}

.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;
}

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

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

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