Question

我正在尝试将button与{2} span对齐。{ 2 span是彼此重叠的，我想在第二个button旁边显示span。

这是我的CSS：

＆＃13;

/* Styles go here */

.contacts {
    position: absolute;
    top: 0;
    left: 70px;
}

.contacts .name {
    font-weight: 700;
    display: block;
}

li {
    position: relative;
    margin-bottom: 30px;
}

＆＃13;

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

＆＃13;

如何将button对齐，并且在名称太长时不要移动，是否可以在没有引导程序的情况下完成？

感谢您提供任何暗示。

Answer 1

只需从按钮中移除pull-right课程即可。

＆＃13;

/* Styles go here */

.contacts {
    position: absolute;
    top: 0;
    left: 70px;
}

.contacts .name {
    font-weight: 700;
    display: block;
}

li {
    position: relative;
    margin-bottom: 30px;
}

＆＃13;

<!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">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">Contact</button>
        </div>
      </li>
    </ul>
  </body>
</html>

＆＃13;

Answer 2

请查看下面的更新，并可能澄清您要查找的内容。主要问题是.contacts div没有设置宽度，因此它默认为其容器中包含的内容。将其展开以填充100％宽度（或任何您想要的宽度），按钮将始终位于右侧，无论城市长度如何。

如果这不是您想要的，请提供更清晰的解释或模型。

/* Styles go here */

.contacts {
    width: 100%;
}

.contacts .name {
    font-weight: 700;
    display: block;
}

ul {
    width: 100%;
}

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>

设计不适用于跨度和按钮

2 个答案: