Geek Answers Handbook

Design does not work with spans and buttons

I am trying to align buttonalong side 2 spans. 2 spanare on top of each other, and I want to display buttonnext to the second span.

Here is my 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>
Run code

How to align buttonwith each other and not move when the name is too long, can this be done without bootstrap?

Thanks for any hint of this.

+4
source share
2 answers

Just remove the class pull-rightfrom your buttons.

/* 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">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>
Run code
+3
source

, , , . , div.contacts , , . , 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

More articles:


All Articles