My goal is to have two elements displayed in a single line. I tried implementing what I thought would work perfectly, but unfortunately, it's not quite right. Here's the issue:
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;
} <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>I'm trying to get the list order label, text, and menu item on the same line using both inline and display-inline properties. What am I missing?