Элементы отображения в одной строке

Question

Я пытаюсь отобразить два элемента в одной строке. Что я использовал, я думал, что это сработает без проблем, но, к сожалению, это нет. Но вместо того, чтобы это то, что я получаю:

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>

мне нужен ярлык список заказов, текст порядка и текст пункта меню, чтобы быть на одной линии. Я использовал как встроенные, так и display-inline. Где я ошибся?

Answer 1

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; тоже.