【问题标题】:How to get labeltext on the same line?如何在同一行获取labeltext?
【发布时间】:2017-03-15 05:42:13
【问题描述】:

我正在使用 bootstrap 3 作为我的样式。尝试在 1 行获取 labeltext 即“mycomp accountnumber”:

.lab {
  display: inline-block;
  font-weight: 10px !important;
}
<section className="serviceDetails">
  <div className="row">
    <div className="col-lg-3">
      <div className="col-lg-2">
        <img src="/pic.png" width="30px" height="60px" alt="" />
      </div>
      <div className="col-lg-9 lab">
        <label className="lab" htmlFor="accountNr">mycomp account number</label>
        <span> 1378173871237817</span>
      </div>
    </div>
  </div>
</section>

我尝试了内联块,但仍然得到 mycomp 帐户,然后在下一行获得编号。如何在 1 行获取 mycomp 帐号?

【问题讨论】:

  • &lt;label&gt; 元素默认已设置为display: inline-block;,我不确定您的意思是它们被阻止了。顺便说一句,它是class 而不是className。这是一个代码笔供您查看codepen.io/yongchuc/pen/VKoOLq
  • 我已经运行了你的代码 sn-p,它运行良好。可能是其他 css 样式与 &lt;label&gt; 样式有冲突。你可以在你的开发工具中调试它。
  • 图片也不居中怎么办?我试过中心挡板。

标签: css twitter-bootstrap reactjs


【解决方案1】:

分成两列

  <div className="col-lg-9 lab">
              <div className="col-sm-6">  <label className="lab" htmlFor="accountNr">mycomp account number</label></div>
         <div className="col-sm-6">
                <span> 1378173871237817</span>
        </div>
              </div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-04-06
    • 2019-06-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多