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

你应该尝试<span>（显示：内联）它会完成这项工作！

Answer 2

.countFieldCell{
    float: right;
}

Answer 3

使用带有width属性的css float属性。使用padding-top将其保留在同一行。

.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>