gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:08:45 30 4
gpt4 key购买 nike

我有一个带有标签和输入框的 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 中看到的,标签和输入显示在不同的行中。无论屏幕宽度如何,我都希望标签和输入显示在同一行上。标签应具有固定大小,使其适合一行中的内容,输入应占据屏幕宽度的其余部分。

感谢任何帮助

最佳答案

我对您的 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>

要更好地理解 spanoverflow:hidden 的原因,您可以阅读以下内容:The magic of "overflow:hidden"

关于css - 使用CSS在同一行显示标签和输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11195569/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com