如何在移动浏览器中将HTML标签文本保留在输入旁边？

我使用

input

和

label

构建这两个控件。它们在桌面浏览器中看起来不错

结构很简单：

<div>  
  <input id=""></input>
  <label for=""><span></span></label>
</div>

在css中，

标签

是

显示：内联块

，

输入

和

div

是

显示：块

但当它显示在手机浏览器中时，它就变得不那么讨人喜欢了

我是否可以强制标签显示在输入旁边？

您可以试试这个

<div>  
  <label>
    <input id=""></input>
    <span></span>
  </label>
</div>

---

这可能不合主题。如果您使用的是引导。你可以像这个例子那样做

检查我的

HTML

选择1课文很长
选择2：课文很长

请尝试以下代码

 <label class=""><input type="checkbox" id=""><span>Label for the check box </span></label>

复选框的标签

---

您可以通过定位来实现这一点

<div>  
  <input type="checkbox">
  <label for=""><span>Choice 1 the text is really long</span></label>
</div>

div { 
    position: relative; 
}
input { 
    display: inline-block;
    position: absolute;
    top:0;
    left: 0;
}
label { 
    display: inline-block;
    position: absolute;
    top:0;
    left: 1.3em;
    font-family: sans-serif;
}

选择1课文很长
div{
位置：相对位置；
}
输入{
显示：内联块；
位置：绝对位置；
排名：0；
左：0；
}
标签{
显示：内联块；
位置：绝对位置；
排名：0；
左：1.3em；
字体系列：无衬线；
}

---

是否尝试在移动显示屏上减小

字体大小

？

<div>  
  <input type="checkbox">
  <label for=""><span>Choice 1 the text is really long</span></label>
</div>

div { 
    position: relative; 
}
input { 
    display: inline-block;
    position: absolute;
    top:0;
    left: 0;
}
label { 
    display: inline-block;
    position: absolute;
    top:0;
    left: 1.3em;
    font-family: sans-serif;
}