0

我有一个包含文本的 div，我想将一些文本移动到 div 的右侧，而无需创建和处理表格。这是我所拥有的，但无济于事：

    <div style="height:50px;background-color:#06276F;color:#FFF;padding:5px;">
    <img align="left" height="50px" width="50px" style="margin-right: 10px;"
        src="<?php echo PilotData::getPilotAvatar($pilotid);?>" />
    <strong>Name: </strong> <?php echo Auth::$userinfo->firstname . ' ' . Auth::$userinfo->lastname;?>
    <span style="text-align:right;"><strong>Total Flights: </strong><?php echo Auth::$userinfo->totalflights?></span><br />
    <strong>Pilot ID: </strong> <?php echo $pilotid ; ?>
    <span style="text-align:right;"><strong>Total Hours: </strong><?php echo Auth::$userinfo->totalhours;?></span><br />
    <strong>Rank: </strong><?php echo Auth::$userinfo->rank;?>
    <span style="text-align:right;"><strong>Hub: </strong><?php echo Auth::$userinfo->hub;?></span><br />
    </div>

看起来是这样的：

在此处输入图像描述

4

1 回答 1

0

你为什么要内联样式？一些使您的代码更具可持续性（和可读性！）的建议

HTML：

<div class="container">
  <img class="avatar" height="50" width="50" src="http://placekitten.com/50/50" />
  <div class="info">
    <ul>
      <li><b>Name:</b> Christopher Pratt</li>
      <li><b>Pilot ID:</b> UAL1</li>
      <li><b>Rank:</b> Captain</li>
    </ul>

    <ul>
      <li><b>Total Flights:</b> 1</li>
      <li><b>Total Hours:</b> 90.3</li>
      <li><b>Hub:</b> KJFK</li>
    </ul>
  </div>
</div>

CSS：

.container {
  background: #06276f;
  color: #fff;
  display: inline-block;
  font-family: "Verdana";
  font-size: 11px;
  height: 50px;
  padding: 5px;
  width: 390px;
}

.avatar {
  float: left;
  margin-right: 10px;
}

.info {
  line-height: 1.5;
}

ul, li { margin: 0; padding: 0; }

ul {
  display: inline-block;
  margin-right: 10px;
}

li {
  list-style-type: none;
}

Codepen 链接：http ://cdpn.io/tilra

于 2013-08-16T22:52:20.270 回答