我有标签和输入框的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中看到的那样,标签和输入显示在单独的行中.我希望标签和输入显示在同一行,而不管屏幕宽度.标签应具有固定的尺寸,允许其将内容装入一行,输入应占据屏幕宽度的其余部分.
感谢任何帮助
Mar*_*ato 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>
为了更好地理解的原因,overflow:hidden在span你能看懂:神奇"溢出:隐藏"