html - 同一行中的两个 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

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

演示

嗨，现在轻松做到这一点

像这样

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