如何在css中添加邊框後的空間

我創建了一個簡單的導航，它似乎可以正常工作。有一件事情真的讓我感到困擾。在最後一個下拉菜單中，我希望在邊界之後留出一些空間，但不能很好地解決如何獲得它。我試圖把一些底部填充下拉李，但它似乎並沒有工作。如何在css中添加邊框後的空間

真的很感謝任何意見，我去哪裏錯了。

https://jsfiddle.net/rufusbear/hv8gwwg9/

<!doctype html> 

<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Fennes Clay</title> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> 
    <link rel="stylesheet" href="css/jquery.bxslider.css"> 
    <script src="https://use.fontawesome.com/9c815a24d9.js"></script> 

    <style> 
    .nav-wrap { 
     max-width: 700px; 
     margin: 0 auto; 
     background-color: #718373; 
     height: 80px; 
     text-transform: uppercase; 
    } 

    .dropdown { 
     display: none; 
     padding: 0; 
     margin: 0; 
     position: absolute; 
     top: 100%; 
     left: 0; 
    } 

    .dropdown li a { 
     width: 110px; 
     height: 40px; 
     line-height: 40px; 
     margin: 0 auto; 
     padding: 5px 10px; 
    } 

    .nav-list { 
     margin: 0; 
     padding: 0; 
    } 

    .nav-list li { 
     position: relative; 
     list-style: none; 
     float: left; 
     width: 150px; 
     line-height: 80px; 
     text-align: center; 
     background-color: #718373; 
    } 

    .nav-list li a { 
     text-decoration: none; 
     color: white; 
     display: block; 
    } 

    .nav-list li:hover>.dropdown { 
     display: block; 
    } 

    .dropdown li a:hover { 
     border: 2px solid white; 
    } 
    </style> 
</head> 
<body> 
    <nav> 
    <div class="nav-wrap"> 
     <ul class="nav-list"> 
     <li><a href="#">about</a> 
      <ul class="dropdown"> 
      <li><a href="#">hello</a></li> 
      <li><a href="#">hello</a></li> 
      <li><a href="#">hello</a></li> 
      <li><a href="#">hello</a></li> 
      </ul> 
     </li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">about</a></li> 
     </ul> 
    </div> 
    </nav> 
</body> 
</html>

來源

2016-09-27 rufus

究竟你是什麼嘗試？ – aavrug

你可以試試嗎？：'

hello

'css：'#lastitem {margin-bottom：2px;}' – Roy123

aavrug - 根據matts的回答我只是想在最後一個項目之後留出一點空白空間，我現在使用了最後一個孩子的風格我的大腦似乎忘記了！ – rufus

這是你以後在做什麼？

.dropdown li:last-child a { 
    margin-bottom: 10px; 
}

來源

2016-09-27 12:21:33

謝謝馬特，我正在尋找什麼！完全忘記了最後一個孩子。我的大腦變得脆弱。 – rufus

很高興爲您提供幫助。請標記一個答案（以你喜歡的爲準），以便幫助任何後來碰到這個問題的人:) –

-1

檢查這一個

https://jsfiddle.net/rufusbear/hv8gwwg9/

margin-top: 30px;

來源

2016-09-27 12:24:29

您可以添加

background-color: #718373; 
padding-bottom: 20px;

到.dropdown元素。

爲了防止shaiking上的鏈接懸停更換

.dropdown li a:hover { 
    border: 2px solid white; 
}

與

.dropdown li a:hover { 
    outline: 2px solid white; 
    outline-offset: -2px; 
}

.nav-wrap { 
 
     max-width: 700px; 
 
     margin: 0 auto; 
 
     background-color: #718373; 
 
     height: 80px; 
 
     text-transform: uppercase; 
 
    } 
 
    
 
    .dropdown { 
 
     display: none; 
 
     padding: 0; 
 
     margin: 0; 
 
     position: absolute; 
 
     top: 100%; 
 
     left: 0; 
 
     
 
     background-color: #718373; 
 
     padding-bottom: 20px; 
 
    } 
 
    
 
    .dropdown li a { 
 
     width: 110px; 
 
     height: 40px; 
 
     line-height: 40px; 
 
     margin: 0 auto; 
 
     padding: 5px 10px; 
 
    } 
 
    
 
    .nav-list { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .nav-list li { 
 
     position: relative; 
 
     list-style: none; 
 
     float: left; 
 
     width: 150px; 
 
     line-height: 80px; 
 
     text-align: center; 
 
     background-color: #718373; 
 
    } 
 
    
 
    .nav-list li a { 
 
     text-decoration: none; 
 
     color: white; 
 
     display: block; 
 
    } 
 
    
 
    .nav-list li:hover>.dropdown { 
 
     display: block; 
 
    } 
 
    
 
    .dropdown li a:hover { 
 
     outline: 2px solid white; 
 
     outline-offset: -2px; 
 
    }

<nav> 
 
    <div class="nav-wrap"> 
 
     <ul class="nav-list"> 
 
     <li><a href="#">about</a> 
 
      <ul class="dropdown"> 
 
      <li><a href="#">hello</a></li> 
 
      <li><a href="#">hello</a></li> 
 
      <li><a href="#">hello</a></li> 
 
      <li><a href="#">hello</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">about</a></li> 
 
     <li><a href="#">about</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav>

來源

2016-09-27 12:25:13 3rdthemagical

非常感謝，現在所有的工作都很好。我用最後一個孩子的風格來獲得我期待的額外空間。非常感謝關於跳躍式懸停的建議，這種改變讓事情看起來好多了 – rufus

添加這條規則：

.nav-list li ul li:last-child { 
    padding-bottom: 15px; 
}

它添加填充底部只對.nav-list內每個嵌套ul最後li（調整PX量，因爲你需要它）

這是一個小提琴：https://jsfiddle.net/8w67f9y7/2/

來源

2016-09-27 12:33:00 Johannes

如何在css中添加邊框後的空間

回答

相關問題