同じ行に2つのdiv要素があります

Question

<div>タグを同じに整列しようとしていますが、私はinline-blockで試していますが、要素が同じ行に表示されていません。以下のスクリーンショットは、どのように見えるかを示しています。私はDataTablesを使用しているので、私はトップクラスを持っています。それはトンを行います。

HTML

<div class="countFieldCell"> 
    <c:if test="${fn:length(intgList) > 0}">Total: ${fn:length(intgList)}</c:if> 
    <c:if test="${fn:length(intgList) == 0}">No Data found..</c:if> 
</div> 
<div class="outerCountSection"> 
<table id="esignTable" style="width:100%;table-layout:fixed"> 
    <thead> 
     <tr> 
      <th align="center" class="fieldLabelCell">Line of Business</th> 
      <th align="center" width="14%" class="fieldLabelCell">Insured</th> 
      <th align="center" width="15%" class="fieldLabelCell">Customer<br>Phone</th> 
      <th align="center" width="16%" class="fieldLabelCell">Policy #</th> 
      <th align="center" width="19%" class="fieldLabelCell">E-Sign<br>Created Date</th> 
      <th align="center" class="fieldLabelCell">Customer<br>Email</th> 
      <th align="center" class="fieldLabelCell" style="text-align: left"># of E-Sign Documents</th> 
     </tr> 
    </thead> 
    <tbody> 

CSS

.dataFieldCell { 
    font: normal 10px Verdana, Arial, Helvetica, sans-serif; 
    vertical-align: top; 
    height: 25px; 
    padding-left: 0px; 

}

.top { 
    display: block; 
    margin: 0 auto; 
    margin-right: 31%; 
} 

.outerCountSection { 
    background: #EAEAEA; 
    font: normal 11px Verdana, Arial, Helvetica, sans-serif; 
    height: 15%; 
    padding-top: 0.25%; 
    padding-bottom: 0.15%; 
} 

Answer 1

float属性とCSS widthプロパティを使用します。同じ行に維持する場合はpadding-topを使用してください。あなたが同じ行になりたい2つのdiv

.countFieldCell{ 
 
width:10%; 
 
float:right; 
 
text-align:right; 
 
padding-top:10px; 
 
} 
 
.outerCountSection{ 
 
width:90%; 
 
}

<div class="countFieldCell"> 
 
    <c:if test="${fn:length(intgList) > 0}">Total: 1</c:if> 
 
</div> 
 
<div class="outerCountSection"> 
 
    <table id="esignTable" style="width:100%;table-layout:fixed"> 
 
    <thead> 
 
     <tr> 
 
     <th align="center" class="fieldLabelCell">Line of Business</th> 
 
     <th align="center" width="14%" class="fieldLabelCell">Insured</th> 
 
     <th align="center" width="15%" class="fieldLabelCell">Customer<br>Phone</th> 
 
     <th align="center" width="16%" class="fieldLabelCell">Policy #</th> 
 
     <th align="center" width="19%" class="fieldLabelCell">E-Sign<br>Created Date</th> 
 
     <th align="center" class="fieldLabelCell">Customer<br>Email</th> 
 
     <th align="center" class="fieldLabelCell" style="text-align: left"># of E-Sign Documents</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

あなたは<span>（インライン表示）を試してみてください彼は仕事！

Answer 3

.countFieldCell{ 
    float: right; 
}