7

我有一个带有标签和输入框的 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>

​ ​</p>

以下是使用的样式：

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

感谢任何帮助

4

1 回答 1

11

我已经对您的 CSS 进行了一些更改，我想我得到了您想要的，这是一个示例，位于 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>

为了更好地理解 in 的原因，overflow:hidden您span可以阅读以下内容：“溢出：隐藏”的魔力

于 2012-06-25T22:42:08.343 回答