Question

.hexagon span {
  color: #0f0f0f;
  font-size: 16px;
  line-height: 0px;
}
.hexagon {
  font-size: 40px;
  /*text-align: center;*/
  line-height: 45px;
}
.hexagon,
.hexagon:hover {
  color: #fff;
  text-decoration: none;
}
.hexagon.red,
.hexagon.red:after,
.hexagon.red:before {
  background: #ed8990;
}
.hexagon.aqua,
.hexagon.aqua:after,
.hexagon.aqua:before {
  background: #8dd7d8;
}
.hexagon.orange,
.hexagon.orange:after,
.hexagon.orange:before {
  background: #fd8a78;
}
.hexagon {
  width: 80px;
  height: 45px;
  position: relative;
  float: left;
  margin: 50px 25px;
  background: #48d1b2;
  border-radius: 4px;
  z-index: 1;
  text-align: center;
  box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.05), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.05);
}
.hexagon:before {
  content: '';
  position: absolute;
  top: -22px;
  left: 16px;
  width: 48px;
  height: 48px;
  background: #b5adac;
  transform: rotate(-54deg) skewY(23deg);
  border-radius: 6px;
  z-index: -1;
  box-shadow: inset -1px 1px 0px 0px rgba(0, 0, 0, 0.05);
}
.hexagon:after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 16px;
  width: 48px;
  height: 48px;
  background: #b5adac;
  transform: rotate(-54deg) skewY(23deg);
  border-radius: 6px;
  z-index: -1;
  box-shadow: inset 1px -1px 0px 0px rgba(0, 0, 0, 0.05);
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div id="menu">
    <a class="hexagon red">
      <i class="fa fa-list"></i>
      <br/>
      <span>Some menu name</span>
    </a>
    <a class="hexagon aqua">
      <i class="fa fa-file-o"></i>
      <br/>
      <span>Foo</span>
    </a>
    <a class="hexagon orange">
      <i class="fa fa-cog"></i>
      <br/>
      <span>Barbazzzzz </span>
    </a>
  </div>
</body>

</html>

我有一些六边形的链接。我尝试添加菜单名称，但有一些问题。

六边形底部和菜单名称之间应该有更大的空间。 margin-top无法帮助内联span。

如果名称太长，则行之间的间距太大。即使我将其设置为line-height: 0px

http://jsbin.com/wohuyubiso/3/edit?css,output

Answer 1

如果我了解您的问题，您只需要将名称org.hibernate.engine.transaction.spi.TransactionContext。

所以，你需要添加如下内容：

display: block

http://jsbin.com/wojuhoravo/edit?html,css,output

当然，在这种情况下，使用.hexagon span { display: block; margin-top: 30px; line-height: 20px; }和正确的类名而不是div会很好。

Answer 2

只需添加适合您的此更改即可

＆＃13;

.hexagon span{
     display: block;
    top: 25px;
    line-height: 20px;
    position: relative;
}

＆＃13;

六角形内联标签中的菜单名称

2 个答案: