我试图在一行中显示两个元素。 我用过的我认为它可以毫无问题地工作,但不幸的是 不是。但相反,这就是我得到的:
div#inline{
padding: 0;
margin:0;
display: inline-block;
height: 40px;
background-color: blue;
width: 100%;
margin-left: 15px;
margin-top: 10px;
}
input[id="Prod_name"]{
width: 90%;
border-radius: 5px;
height: 30px;
border: 1px solid;
margin: auto;
}
label#label{
float:right;
padding-right: 40px;
}
p#session{
padding-left: 20px;
font-weight: bold;
color: #fff;
line-height:28px;
}
input[id="list_ord"]{
padding: 0;
margin: 0;
float: right;
width: 5%;
padding-right: 20px;
top: 5px;
}
<div id='inline'>
<p>Menu Item</p>
<label id='label' for='list_ord'>List Order</label>
<input type='text' id='list_ord' name='list_ord' value=''>
</div>
我需要将列表顺序标签、列表顺序文本和菜单项文本放在一行上。 我同时使用了内联和显示内联。我哪里出错了?
最佳答案
div#inline{
padding: 0;
margin:0;
display: inline-block;
height: 40px;
background-color: blue;
width: 100%;
margin-left: 15px;
margin-top: 10px;
}
.inline{
display:inline-block;
}
input[id="Prod_name"]{
width: 90%;
border-radius: 5px;
height: 30px;
border: 1px solid;
margin: auto;
}
label#label{
float:right;
padding-right: 40px;
}
p#session{
padding-left: 20px;
font-weight: bold;
color: #fff;
line-height:28px;
}
input[id="list_ord"]{
padding: 0;
margin: 0;
float: right;
width: 5%;
padding-right: 20px;
top: 5px;
}
<div id='inline'>
<p class='inline'>Menu Item</p>
<label id='label' for='list_ord'>List Order</label>
<input type='text' id='list_ord' name='list_ord' value=''>
</div>
您还需要提供包含文本、菜单项、display:inline-block;
的段落元素。
关于html - 在一行中显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36630529/