使用 css 在同一行显示标签和输入答案

【问题标题】：showing label and input in same line using css使用 css 在同一行显示标签和输入
【发布时间】：2012-06-25 18:58:32
【问题描述】：

我有一个带有标签和输入框的 html 标记。但是，出于商业原因，我需要在同一行显示标签和输入框并隐藏占位符文本。最终结果应该看起来像占位符文本保留在那里。示例在这里：http://jsfiddle.net/XhwJU/

这是供参考的标记：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title> 
</head>
<body>
   <h1> test </h1>
   <div class="inputdata">
      <label for="AccessCode"> Access Code: </label>
      <div style="display:inline"> <input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /> </div>
      <div class="clear"></div>
   </div>
</body>
</html>

这里是使用的样式：

.inputdata {
  border: thin solid gray;
  padding: 0.1em;
  margin: 0.1em;
  vertical-align: middle;
}

div .inputdata label {
  width:auto;
  float:left;
  color: gray;
  line-height: 2;
  padding-top: .4em;
}

input[type='text']{
  overflow:hidden;
  line-height: 2;
  box-shadow: none;
  border:none;
  vertical-align: middle;
  background:none;
  width:100%;
}

.clear {
  clear: both; 
  height: 1px; 
  overflow: hidden; 
  font-size:0pt; 
  margin-top: -1px;
}

正如您在 jsfiddle 中看到的那样，标签和输入显示在单独的行中。无论屏幕宽度如何，我都希望标签和输入显示在同一行。标签应该有一个固定的大小，允许它在一行中容纳内容，并且输入应该占据屏幕宽度的其余部分。

感谢任何帮助

【问题讨论】：

查看 API 文档。我为我的一个应用程序做了这个，但目前我在我的手机上，并不能真正帮助你。不过，这一切都在文档中。
找到了。在要内联的元素周围使用<div data-role=” fieldcontain”>。
jquerymobile.com/test/docs/forms/docs-forms.html 在字段容器下查看
fieldcontain 的问题是它在输入框周围设置了边框，并且还将输入框移动到小屏幕上的下一行。我希望它保持在同一个屏幕上。此外，我试图在 div 周围设置边框，而不仅仅是在输入框周围，所以它给人的感觉是整个容器都是一个输入框
是的，我刚刚读到在 480px 下它会换行。您是否尝试过使用网格视图来对齐元素？

标签： css html inline

【解决方案1】：

我对你的 CSS 做了一些更改，我想我得到了你想要的，here is an example 以及低于 HTML 和 CSS。

CSS

div.inputdata{
    border:thin solid gray;
    padding:0.1em;
    margin:0.1em;
}

div.inputdata label{
    float:left;
    margin-right:10px;
    padding:5px 0;
    color:gray;
}

div.inputdata span{
    display: block;
    overflow: hidden;
}

div.inputdata input{
    width:100%;
    padding-top:8px;
    border:none;
    background:none;
}

.clear {
    clear: both; 
}

HTML

<h1>test</h1>
<div class="inputdata">
    <label for="AccessCode"> Access Code: </label>
    <span><input type="text" name="accessCode" id="AccessCode" value=""  placeholder="" /></span>
    <div class="clear"></div>
</div>

为了更好地理解span中overflow:hidden的原因，您可以阅读以下内容：The magic of "overflow:hidden"

【讨论】：

@Kiran，很高兴为您提供帮助！
嘿，在相关的说明中，你能看看stackoverflow.com/questions/11249888/…吗？
@Kiran，对不起，我刚才看到了你的评论。我会看看你的问题。
非常适合我的需要！声誉++