设计不是使用跨度和按钮

I am trying to align buttons along side 2 spans. The 2 spans are on top of each other, and I want to display the button beside the second span.

我试着将按钮排列在两边的两个跨度上。两个跨在一起，我想在第二个跨旁边显示按钮。

Here's my CSS:

这是我的CSS:

/* Styles go here */

.contacts {
    position: absolute;
    top: 0;
    left: 70px;
}

.contacts .name {
    font-weight: 700;
    display: block;
}

li {
    position: relative;
    margin-bottom: 30px;
}

<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <ul>
      <li>
        <div class="contacts">
          <span class="name">short name</span>
          <span class="city">City</span>
          <button class="btn btn-default btn-sm pull-right">Contact</button>
        </div>
      </li>
      <li>
        <div class="contacts">
          <span class="name">very long name will be here</span>
          <span class="city">city</span>
          <button class="btn btn-primary btn-sm pull-right">Contact</button>
        </div>
      </li>
      <li>
        <div class="contacts">
          <span class="name">another long name will be here too</span>
          <span class="city">city</span>
          <button class="btn btn-default btn-sm pull-right">Contact</button>
        </div>
      </li>
    </ul>
  </body>    
</html>

更多相关文章

随机推荐