html - 同じ行に2つのdivがあり、1つのdivは中央にあり、もう1つのdivは右側にあります。

Question

私は次のような状況にあります

                         CustomerInformation                               button

上記は私が欲しい出力です

    <div id="headerCustomer">   


<h:outputText  style="font-size: 18px;font-weight:bold;"  value="CustomerInformation " ></h:outputText>


<input type="button"></input>

    </div>

上記を達成するためのCSSは何でしょうか。

Answer 1

...................................................

デモ

こんにちは、これは簡単にできます

このように

CSS

    #headerCustomer{
    background:red;
      position:relative;
    }
    .cntr{
    font-size: 18px;font-weight:bold;
      background:green;
      display:block;
      width:500px;
      margin:0 auto
    }
.inbg{
position:absolute;top:0; right:0;
}

HTML

<div id="headerCustomer">   


<h:outputText   value="CustomerInformation" class="cntr">Hello the the text here</h:outputText>


<input type="button" value="submit" class="inbg">

    </div>

デモ

Answer 2

これを試してみてください

<div id="headerCustomer"> 
<div style="float:left; padding-left:100px;" >
<h:outputText  style="font-size: 18px;font-weight:bold;"  value="CustomerInformation">    </h:outputText>
</div>
<div style="float:right" ><input type="button" /></div>

Answer 3

私はあなたがこのように見えることを願っています:- http://tinkerbin.com/jLXcBKTL

HTML

<div id="headerCustomer">   
<h:outputText value="CustomerInformation " >Customer Information</h:outputText>
<input type="button" value="submit"></input>
</div>

CSS

#headerCustomer {
background:red;
text-align:center;
font-size: 18px;
font-weight:bold; 
}
input[type=button] { 
  float: right;
  width:100px;
  height:20px;  
}