两个div在同一行中一个div中心，另一个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

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

的 Demo 的

嗨，现在很容易做到这一点

就像这样

<强>的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>

的 Demo 的

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;  
}