顯示元素在一行中

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>

我需要的列表順序標籤，列表的順序文本和菜單項文本是在一行。 我已經使用了inline和inline-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;太段落元素。