javascript - html、css 上的按钮对齐问题

Question

我想要这样的东西https://www.producthunt.com/e/best-of-february-2017

在悬停时外部链接和保存必须出现在同一行，但对我来说对齐不会出现。提前致谢!

片段在下面，这是我的代码 的图像结果

< script type = "text/javascript" >
  $(document).ready(function() {
    $(document).on('mouseenter', '.sec-b', function() {
      $(this).find("#external").show();
    }).on('mouseleave', '.sec-b', function() {
      $(this).find("#external").hide();
    });
  }); <
/script>

<
script type = "text/javascript" >
  $(document).ready(function() {
    $(document).on('mouseenter', '.sec-b', function() {
      $(this).find("#down").show();
    }).on('mouseleave', '.sec-b', function() {
      $(this).find("#down").hide();
    });
  }); <
/script>

.sec-b {}

#gb {
  margin-top: 2%;
}

#gb1 {
  margin-top: -13%;
  margin-left: 15%;
  font-size: 20px;
}

#gb2 {
  margin-top: -1%;
  margin-left: 15%;
}

.but {
  display: inline-block;
  font-size: 12px;
  margin-top: 1%;
  margin-left: 15%;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  position: relative;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #000000;
  text-transform: capitalize;
  transition: all linear 0.2s;
}

.but span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  display: inline-block;
  vertical-align: middle;
  background-color: #9E9E9E;
  border-left: 1px solid #BDBDBD;
  width: 0px;
  visibility: hidden;
}

.but:hover {
  padding-right: 30px;
  background-color: #ffffff;
}

.but:hover span {
  width: auto;
  visibility: visible;
  padding: 3px;
  background-color: #e6e6e6;
}

#up {
  margin-left: 53%;
  margin-right: 1%;
}

#down {
  margin-left: 45%;
  margin-right: 1%;
}

#external {
  margin-left: 35%;
  margin-right: 1%;
}

#comment {
  margin-top: 3px;
}

.fa-caret-up {
  font-size: 14px;
  padding: 2px 2px 2px 2px;
}

.fa-comment {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-download {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-external-link {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="sec-b">

  <img src="img/gboard.jpg" height="100" width="100" id="gb">
  <p id="gb1">Gboard by Google</p>
  <p id="gb2">Google search,emoji</p>
  <span class="btn btn-secondary btn-sm but">
							TECH
							  <span>+</span>
  </span>
  <a href="#" class="btn btn-secondary btn-sm" id="external"><span class="fa fa-external-link"></span> 
    						</a>
  <a href="#" class="btn btn-secondary btn-sm" id="down"><span class="fa fa-download">&ensp;SAVE</span> 
    						</a>

  <a href="#" class="btn btn-secondary btn-sm" id="up"><span class="fa fa-caret-up">&ensp;2662</span> 
    						</a>
  <a href="#" class="btn btn-secondary btn-sm" id="comment"><span class="fa fa-comment">&ensp;42</span> </a>
  <hr>


</div>

Answer 1

我已经通过对 CSS 和 HTML 进行一些更改解决了您的问题。这是它的 fiddle :JSFiddle
我试图获得与 producthunt.com 示例相同的结果。所以，我几乎重写了你的代码。请主要看一下 HTML 和 CSS:

HTML:

<div class="sec-b">
  <img src="https://ph-files.imgix.net/1c1c487a-379f-4f0c-99cd-cb6048a85606?
 auto=format&auto=compress&codec=mozjpeg&cs=strip&w=80&h=80&fit=crop" 
height="80" width="80" align="left">
  <p>Gboard by Google<br>
  <small>Google search, emoji</small></p>
  <div class="btn btn-secondary btn-sm but">TECH<span>+</span></div>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="comment"><span class="fa fa-comment">&ensp;42</span></a>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="up"><span 
class="fa fa-caret-up">&ensp;2662</span></a>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="down"><span 
class="fa fa-download">&ensp;SAVE</span></a>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="external"><span class="fa fa-external-link"></span></a>
  <hr>
</div>

CSS:

.sec-b {
  display: block;
  padding:0.5rem;
}
.sec-b p, .sec-b small {
  margin-bottom:0;
}
.sec-b > img {
  padding: 0.25rem 0.5rem;
}
.sec-b .btn {
  margin: 0.25rem 0.25rem;
}
.sec-b:first-child .btn {
  margin: 0.25rem 0.25rem 0.25rem 0;
}
.but {
  display: inline-block;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  position: relative;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #000000;
  transition: all linear 0.2s;
  cursor: pointer;
}
.but span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  display: inline-block;
  vertical-align: middle;
  background-color: #9E9E9E;
  border-left: 1px solid #BDBDBD;
  width: 0px;
  visibility: hidden;
}
.but:hover {
  padding-right: 1.5rem;
  background-color: #ffffff;
}
.but:hover span {
  width: auto;
  visibility: visible;
  padding: 3px;
  background-color: #e6e6e6;
}
.fa-caret-up {
  font-size: 14px;
  padding: 2px 2px 2px 2px;
}
.fa-comment {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
.fa-download {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
.fa-external-link {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

JS:

$(document).ready(function() {
  $(document).find("#external").hide();
  $(document).find("#down").hide();
  $(document).on('mouseenter', '.sec-b', function() {
    $(this).find("#external").show();
  }).on('mouseleave', '.sec-b', function() {
    $(this).find("#external").hide();
  });
});
$(document).on('mouseenter', '.sec-b', function() {
  $(this).find("#down").show();
}).on('mouseleave', '.sec-b', function() {
  $(this).find("#down").hide();
});

仍然很乱，你必须清理你的代码。您可以合并“外部”和“向下”ID，并可以编写单个 JS 以在鼠标悬停时隐藏/显示它。