Question

我只想让第二个div显示底部边框。我要么让div显示底部边框，要么根本不显示。

＆＃13;

.container {
  width: 75%; overflow: hidden;
  border: 0;
}
.container div:nth-child(1) {
  width: auto; float: left; height: 25px;
  padding: 5px 20px;
  background-color: white; 
}
.container div:nth-child(2) {
  margin-left: auto; height: 25px;
  padding: 5px 20px;
  background-color: ghostwhite;				
  border-bottom: 1pt solid black;
}

＆＃13;

<div class="container">
  <div>Div Left</div><div>Div Right</div>
</div>

＆＃13;

Answer 1

使用display：inline-block，而不是float，因为float允许第二个div占用第一个div后面的空间。

.container {
  width: 75%;
  overflow: hidden;
  border: 0;
}
.container div:nth-child(1) {
  width: auto;
  height: 25px;
  padding: 5px 20px;
  background-color: white;
  display: inline-block;
}
.container div:nth-child(2) {
  margin-left: auto;
  height: 25px;
  padding: 5px 20px;
  background-color: ghostwhite;
  border-bottom: 1pt solid black;
  display: inline-block;
}

<div class="container">
  <div>Div Left</div>
  <div>Div Right</div>
</div>

如何获得第二个并排div仅显示底部边框

1 个答案: