2016-04-14 57 views
0

2つの要素を1行に表示しようとしています。 私は何を使用して問題なく動作すると思ったが、残念ながらそれは ではない。しかし、その代わりに、これは私が取得していますものです:表示要素を1行に表示

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>

は、私は1本のライン上にあるリストの順番ラベル、リストの順番のテキストやメニュー項目のテキストを必要としています。 私はインラインとディスプレイインラインの両方を使用しました。どこが間違っていたのですか?

+0

ラベルと入力が1行であるため、2はありません。 – LGSon

+0

@LGS私はより具体的であったはずです。同じ行にメニュー項目pタグも必要です。 – Monroe

答えて

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;を持っている段落要素を与える必要があります。

+0

パーフェクト!ありがとうございました – Monroe

関連する問題