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

Question

我用input和label来构造这两个控件。它们在桌面浏览器中看起来不错。

结构简单：

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

在css中，label是display:inline-block，input和div是display:block

但是在手机浏览器中显示时，就变得不那么赏心悦目了

有什么方法可以强制标签显示在输入旁边？

Answer 1

你可以试试这个

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

Answer 2

这可能离题了。如果您使用 bootstrap。你可以像这个例子那样做。

查看我的DEMO

HTML

<form class="form-inline">
    <div class="checkbox">
        <label><input type="checkbox"/> Choice 1 The text really long </label>
    </div>
</form>

<form class="form-horizontal">
    <div class="checkbox">
        <label><input type="checkbox"/> Choice 2 The text really long </label>
    </div>
</form>

Answer 3

试试下面的代码。

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

Answer 4

你可以通过定位来做到这一点。

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

https://jsfiddle.net/oy48xphp/1/

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

How to keep HTML label text next to an input in mobile browser?

html

css

mobile-safari