【问题标题】:How to get text on one line如何在一行上获取文本
【发布时间】:2020-10-18 23:21:23
【问题描述】:

我试图在一行中显示“是的,请”。我希望它完全像那样对齐。但是它显示在两行上。

<section class="contactus">
  <div class="contactustitle">
    <h1>Where happy to hear from you</h1>
    <ion-icon style="width: 100%;" name="remove-outline"></ion-icon>

  </div>
  <div class="contactusinput" style="width: 60%">
    <div class="name">
      <p>Name</p> <input style="width: 70%;" placeholder="Your name" type="text"> </div>
    <div class="email">
      <p>Email</p> <input type="text" placeholder="Email" style="width: 70%;"> </div>
    <div class="refer">
      <p>How did you find us? </p> <input type="text" placeholder="Your erfferer" style="width: 70%;"> </div>
    <div style="border: 1px solid red; width: 42%;">
      <p>Newsletter?</p>
      <div style="display: inline-flex;  border: 1px solid red;"><input type="checkbox" name="" id="">yes, please</div>
    </div>
    <div>
      <p>drop us a line</p> <input type="textarea" placeholder="Your message" style="width: 70%; height: 100px;" style=""> </div>
    <div style=" display: flex; justify-content: center;"><button style="width: 20%; padding: 10px; border: 1px solid #e67e22; border-radius: 200px; background-color: #e67e22; color: #ffff; font-weight: 300;">Send it!</button></div>
  </div>

</section>

【问题讨论】:

    标签: html css flexbox word-break


    【解决方案1】:

    除了可以想到的所有 CSS 和内联样式之外,在这种特殊情况下(即只有两个简短的单词),实现这一目标的最简单方法是在单词“yes”之间放置一个“不间断空格”HTML 实体和“请”而不是正常的空间。因此,您的文本(在代码中)应该是 yes,&amp;nbsp;please

    ,而不是“是的,请”

    【讨论】:

    • 好像去掉了复选框?
    • 不,那是不可能的——你一定是做了其他事情才导致这种情况。否则,容器最终太窄,并且在侧面被切断(检查浏览器工具)
    • 嗯,不,那是我唯一摸过的东西?
    • 抱歉,这确实是不可能的
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-12-31
    • 1970-01-01
    • 1970-01-01
    • 2013-11-11
    • 1970-01-01
    • 2012-10-28
    • 2012-11-12
    相关资源
    最近更新 更多