菜單名狀的內聯標籤

.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

來源

2015-11-06 user3568719

工作如何你想要的輸出過呢？ –

最佳地在六邊形下，大約10px，以六邊形的寬度爲中心（80px） – user3568719

@Paulie_D我將代碼添加到我的問題中作爲片段。 – user3568719

如果我理解你的問題，你只需要使名稱display: block。

所以，你需要添加類似：

.hexagon span { 
    display: block; 
    margin-top: 30px; 
    line-height: 20px; 
}

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

當然，這將是很好使用div適當的類名稱，而不是在這種情況下span。

來源

2015-11-06 12:52:53 Marek

感謝您提供快速解決方案。我工作很好，但我有一個問題：http://jsbin.com/himuyasavu/1/edit?html,css,output。如果我在#menu下面添加一個div，它的文本出現在菜單名稱下。 – user3568719

- ^^請複習你的答案。 – user3568719

您的DOM元素結構並不那麼容易。我已經改變了一點。我認爲它現在也更清晰一些了（例如菜單項文字不應該在六邊形內）。 http://jsbin.com/pevexofuxe/edit?html,css,output – Marek

只添加這種變化，這將是對你

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

來源

2015-11-06 13:05:22

菜單名狀的內聯標籤

回答

相關問題