如何把「表單」放在同一行？

那麼我嘗試才達到的是，我有這樣的事情：如何把「表單」放在同一行？

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

，所以我根本對準左側和右側。這是我的小提琴： 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>

來源

2015-11-05 None

貌似表格數據給我，那麼爲什麼不使用一個表？ – j08691

@AlexChar其左右不對齊 – None

https://jsfiddle.net/7vdbLcL9/11/ – potashin

您可以修復第一跨度與此代碼.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"> \t 
 
    <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>

來源

2015-11-05 14:41:21 Aroniaina

試試這個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; 
}

來源

2015-11-05 14:43:26

這是你在找什麼：https://jsfiddle.net/7vdbLcL9/12/？

我剛剛添加了一個選擇器：工作時間細節span.time和一類「時間」。

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>

來源

2015-11-05 14:44:25 divix

您可以添加類，每個跨度和一個浮動左邊，並漂浮對方的權利。這樣你就不用擔心有什麼固定的寬度。

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

來源

2015-11-05 14:47:03 GeneralAsh

如何把「表單」放在同一行？

回答

相關問題