Html 使用 css 在同一行显示标签和输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11195569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
showing label and input in same line using css
提问by Kiran
I have a html mark up with label and inputbox. However, for business reasons, I need to show the label and inputbox on sameline and hide the placeholdertext. The end result should look like the placeholder text is staying there. Example is here: http://jsfiddle.net/XhwJU/
我有一个带有标签和输入框的 html 标记。但是，出于业务原因，我需要在同一行上显示标签和输入框并隐藏占位符文本。最终结果应该看起来像占位符文本留在那里。示例在这里：http: //jsfiddle.net/XhwJU/
Here is the markup for reference:
以下是供参考的标记：
<!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>
? ?
? ?
Here is the styles used:
以下是使用的样式：
.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;
}?
As you can see in the jsfiddle, label and input show in separate lines. I want the label and input to show up on same line irrespective of the screenwidth. Label shall have a fixed size that allows it to fit contents in one line and the input shall occupy the rest of the screen width.
正如您在 jsfiddle 中看到的，标签和输入显示在单独的行中。无论屏幕宽度如何，我都希望标签和输入显示在同一行上。标签应具有固定的大小，以使其适合一行中的内容，并且输入应占据屏幕宽度的其余部分。
appreciate any help
感谢任何帮助
回答by Marcio Mazzucato
I've done some changes in your CSS and i think i got what you want, here is an exampleand below HTML and CSS.
我对你的 CSS 做了一些更改，我想我得到了你想要的，这里是一个例子，下面是 HTML 和 CSS。
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
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>
To understand better the reason of overflow:hiddenin spanyou can read this: The magic of "overflow:hidden"
要更好地理解overflow:hiddenin的原因，span您可以阅读以下内容：“溢出：隐藏”的魔力
