css - 如何在一行中显示 Time Div 和 Message div？

Question

你能告诉我如何在一行中显示时间和消息吗？？

我想要的输出必须是

时间空间消息这里(全部在一行中)

这是我的代码

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

这是我的 fiddle

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

Answer 1

您需要在 .mt1 容器中使用 div 来显示 inline 而不是 block，所以像这样会起作用:

.mt1 > div {
  display: inline;
}

fiddle :https://jsfiddle.net/pL7xugg1/9/

另一种方法是将所有内容放在一个 div 中，因为它看起来不像您在对其他 4 个 div 做任何事情或者 p 或 span。

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