Question

我正在使用WordPress，并且在页脚的HTML小部件中有以下代码，但是电子邮件显示在2行中，如何使电子邮件正确显示在1行中，谢谢！它显示为：

第1行：office @ glassche

第2行下方：m.eu

<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <i class="ion-ios-location-outline"></i>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
        <p>Plovdiv, Bulgaria</p>
    </div>
</div>
<hr/>
<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <i class="ion-ios-telephone-outline"></i>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
        <p>
            <span>+359 32 680 129</span>
            <br/>
            <small>Mon-Fri, 8.30am until 
    5.00pm</small>
        </p>
    </div>
</div>
<hr/>
<div class="row">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <i class="ion-ios-email-outline"></i>
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
        <p>
            <span>office@glasschem.eu</span>
            <br/>
            <small>We reply within 24 
    hours</small>
        </p>
    </div>
</div>

Answer 1

您的代码可以使用html。它的节目是这样的 enter image description here

也许您删除了span标签，给它一个类并对其应用CSS

display：inline-block;

它应该可以在WordPress小部件中使用。

Answer 2

您正在尝试将电子邮件放入宽度为16.33％的col-md-2内，因此它不合适，并且分为两行

将此CSS用于电子邮件范围标签

span{
    white-space: nowrap;
}

调整HTML WordPress小部件的宽度

2 个答案: