如何在单行显示时间分隔和消息div？

-1

您能否让我知道我该如何在一行中显示时间和消息？如何在单行显示时间分隔和消息div？

我所需的输出必须是

时间空间消息这里（所有在一个单一的线路）

这是我的代码

<div class="mdv"> 
<a href="/tips/"><div class="hed1 nav1" style="color:#333;border-radius:4px 4px 0 0">Latest Share Tips</div></a> 
       <a href="/tips/437373-buy-tata-communications-ltd-ta/" class="c1"> 
       <div class="stoc5 mt1"> 
         <div class="fl c2 f14 ti-s mt">5 hours</div> 
         <div class="c1 fl wi80">(Period - Intraday) - Buy Tata Communications Ltd - Target price 433.00</div> 
         <div class="fr c2 f14 ti-s1 mt"></div> 
         <div class="cl"></div> 
       </div> 
     </a> 
       <a href="/tips/437372-buy-bharti-airtel-ltd-bhartiar/" class="c1"> 
       <div class="stoc5 mt1"> 
         <div class="fl c2 f14 ti-s mt">6 hours</div> 
         <div class="c1 fl wi80">(Period - Intraday) - Buy Bharti Airtel Ltd - Target price 332.25</div> 
         <div class="fr c2 f14 ti-s1 mt"></div> 
         <div class="cl"></div> 
       </div> 
     </a> 
       <a href="/tips/437371-buy-pipavav-defence-offshore-e/" class="c1"> 
       <div class="stoc5 mt1"> 
         <div class="fl c2 f14 ti-s mt">6 hours</div> 
         <div class="c1 fl wi80">(Period - Intraday) - Buy Pipavav Defence &amp; Offshore Engineering Company Ltd - Target price 89.60</div> 
         <div class="fr c2 f14 ti-s1 mt"></div> 
         <div class="cl"></div> 
       </div> 
     </a> 
       <a href="/tips/437370-buy-praj-industries-ltd-prajin/" class="c1"> 
       <div class="stoc5 mt1"> 
         <div class="fl c2 f14 ti-s mt">6 hours</div> 
         <div class="c1 fl wi80">(Period - Long term) - Buy Praj Industries Ltd - Target price 150.00</div> 
         <div class="fr c2 f14 ti-s1 mt"></div> 
         <div class="cl"></div> 
       </div> 
     </a> 
       <a href="/tips/437369-sell-acc-ltd-acc-at-1-354-00-f/" class="c1"> 
       <div class="stoc5 mt1"> 
         <div class="fl c2 f14 ti-s mt">6 hours</div> 
         <div class="c1 fl wi80">(Period - Intraday) - Sell ACC Ltd - Target price 1,330.00</div> 
         <div class="fr c2 f14 ti-s1 mt"></div> 
         <div class="cl"></div> 
       </div> 
     </a> 
<div class="cl"></div> 
</div>

这是我的小提琴

https://jsfiddle.net/pL7xugg1/5/

来源

2015-12-24 Pawan

你需要你的div是你.mt1容器内，以显示inline而非block，所以像这样的工作：

.mt1 > div { 
    display: inline; 
}

小提琴：https://jsfiddle.net/pL7xugg1/9/

另一种方法是把所有的内容里面一个单一的div，因为它看起来并不像你正在做的任何事情与其他4个div或p或span。

我对使用4个div进行的假设是，如果您可以提供更多的上下文，可以更新答案，您希望为每个布局，着色等执行特定的操作。

来源

2015-12-24 12:32:02 dougajmcdonald

可以使用例如：

<div class="stoc5 mt1" style="display: inline-flex;">

来源

2015-12-24 12:32:46

使用<span></span>标签旁边有另一个元素的元素。或者使用display:inline-block; CSS获得相同的结果：

DEMO

来源

2015-12-24 12:39:34 user3284463

如何在单行显示时间分隔和消息div？

回答

相关问题