Karla Karla - 6 months ago 15
HTML Question

Design is not working with spans and button

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:



/* 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>





How do I align the buttons to be under each other and not to move when the name is too long, can it be done without bootstrap?

Thanks for any hint about it.

Answer

Just remove your pull-right class from 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" style="display: inline;">City</span>
                <button class="btn btn-default btn-sm pull-right" style="display: inline;">Contact</button>
            </div>
        </li>
        <li>
                <div class="contacts">
                <span class="name">very long name will be here</span>
                <span class="city" style="display: inline;">city</span>
                <button class="btn btn-primary btn-sm" style="display: inline;">Contact</button>
            </div>
            </li>
            
            
               <li>
                <div class="contacts">
                <span class="name">another long name will be here too</span>
                <span class="city" style="display: inline;">city</span>
                <button class="btn btn-default btn-sm" style="display: inline;">Contact</button>
            </div>
            </li>
    </ul>        
  </body>

</html>