Question

假设我有一个带有表单的网页：

<form>
  <label for="FirstName">First:</label>
  <input name="FirstName" type="text">
  <label for="MiddleName">Middle:</label>
  <input name="MiddleName" type="text">
  <label for="LastName">Last:</label>
  <input name="LastName" type="text">
</form>

如果我将浏览器窗口调整得足够小，我会在标有“Middle：”和“MiddleName”输入的标签之间换行。最好在标签和不相关的输入字段之间放置一个间隔，例如，在“FirstName”输入和“MiddleName”的标签之间，和/或输入“MiddleName”和“LastName”的标签之间断开。显然我可以添加<br/>标签，但是有一种很好的方法可以将相关项目保持在一起，并且当浏览器窗口足够宽时仍然只使用1行吗？

我意识到这是一个人为的例子，但这是我在几个更复杂的现实世界中遇到麻烦的模式。

Answer 1

将label放在for内，您甚至不需要white-space: nowrap属性。然后使用label { white-space: nowrap; }设置标签样式，以防止自动换行。

＆＃13;

<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>

＆＃13;

static

＆＃13;

Answer 2

在包装器中包围相关元素，然后使用CSS阻止内部包装器中的换行符：

seekFood()

$conn = new PDO('sqlsrv:Server=address,port;Database=dbname',$username, $password); $sth = $conn->prepare("Select COL1 FROM myTable WHERE A LIKE ? AND B LIKE ? AND C LIKE ? ... L LIKE ?"); $sth->execute(array($valA,$valB,...$valL); $data = $sth->fetchAll(); print_r($data);

Answer 3

您可以使用<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">

的包装器围绕每个集合

<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />

display: inline-block;

Answer 4

我使用getuikit进行表单样式，他们使用这样的东西：

HTML

$('#datetimepicker1').datetimepicker({
     format: 'l',
     locale:'en-gb'
});

CSS

<label>My label</label>
<div class="controls"><input type=text/></div>

它不会破坏语义。将输入置于标签内部有点奇怪：）

如何将表单输入和标签保持在一起？

4 个答案: