Question

我有标签和输入框的html标记。但是，出于商业原因，我需要在同一行显示标签和输入框并隐藏placeholdertext。最终结果看起来应该像占位符文本一样。示例如下：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中看到的那样，标签和输入显示在单独的行中。我希望标签和输入显示在同一行，而不管屏幕宽度。标签应具有固定的尺寸，允许其将内容装入一行，输入应占据屏幕宽度的其余部分。

感谢任何帮助

Answer 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>

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

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

1 个答案: