Question

我正在尝试使用适当的填充来实现简单的css边框效果。试图在不使用引导程序的情况下使其响应。

我只有一个字体和边框，两个div之间的箭头，但我没有得到它代码：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.work {
  float: left;
  border: 4px solid black;
  padding: 10px 10px 10px 10px;
}

.work:before {
  content: '\f178';
  margin-top: 10px;
  position: absolute;
  right: -11px;
  top: 44%;
}

＆＃13;

<div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST1</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST2</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST3</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST4</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST5</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST6</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST7</h4>
  </div>
</div>

＆＃13;

链接到codepen：https://codepen.io/rahulv/pen/BRwjEd

我想要实现的是我在两个盒子之间没有填充也希望它们之间的箭头..它像test1 - ＆gt; test2 - ＆gt; TEST3 ..

Answer 1

您缺少必需的边框样式属性。你还需要在position: relative;上.work来使绝对定位的伪元素工作，以及字体真棒字体系列。文字对齐：图标中心......

查看完整示例：

.work{
  position: relative;
  float:left;
  border: 4px solid black;
  padding: 10px 10px 10px 10px;
  text-align: center;
}

.work:not(:last-of-type) {
  margin-right: 20px;
}
.work:not(:last-of-type):before {
    content: '\f178';
    font-family: "FontAwesome";
    margin-top: 10px;
    position: absolute;
    right: -22px;
    top: 41%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST1</h4>
</div>
  
  <div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST2</h4>
    
</div>
  
  <div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST3</h4>
</div>
  <div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST4</h4>
</div>
  <div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST5</h4>
</div>
  <div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST6</h4>
</div>
  <div class="work">
<i class="fa fa-puzzle-piece"></i>
<h4>TEST7</h4>
</div>
</div>

Answer 2

您需要进行以下更改

.work:before {
    content: '\f178';
    margin-top: 0;
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
}

和

 .work:not(:last-of-type) {
    margin-right: 20px;
 }

这是最后的演示

http://codepen.io/sajiddesigner/pen/EmwKvj

Answer 3

要将字体精彩箭头放在父级右侧之外，请使用right: 0;将其移至右侧，然后使用translateX()将其推送到父级之外。

要将拼图块放在文本正上方，请从文本中删除margin（或只是margin-top）。

要在框之间留出空格，您需要一个右margin。

＆＃13;

.work {
  float: left;
  border: 4px solid black;
  padding: 10px;
  margin-right: 25px;
  position: relative;
}

h4 {
  margin: 0;
}

.work:before {
  content: '\f178';
  position: absolute;
  transform: translateX(150%);
  top: 50%; right: 0;
  font-family: 'FontAwesome';
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST1</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST2</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST3</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST4</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST5</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST6</h4>
  </div>
  <div class="work">
    <i class="fa fa-puzzle-piece"></i>
    <h4>TEST7</h4>
  </div>
</div>

＆＃13;

Answer 4

您需要指定边框类型

尝试使用：

border: 4px black solid;

无法使用边框

4 个答案: