css 如何删除导航栏元素中的间隙？

ttcibm8c 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(190)

我有一个下拉菜单设置，但我不希望有一个缺口，在.navbar元素打开时。这是在艺术品和商店元素之间。在点击（artwork）下拉元素之前，.nav栏处于所需的状态，但当点击它时，artwork和store之间出现了一个间隙-正如您在图像中看到的那样。
Before Artwork element clicked
After Artwork element clicked (dropdown appears but gap present)

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Menu with Thumbnails and Text</title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            background-color: #f9f9f9;
            padding: 10px;
            position: static;
        }
        
        .navbar-item {
            margin-right: 10px;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            background-color: #f9f9f9;
             /* Set the width to 500 pixels */
            padding: 10px;
            left: 50%; /* Center the dropdown horizontally */

           
            
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .thumbnails-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap; /* Change to nowrap to keep thumbnails in a single line */
            padding: 5px;
            overflow-x: auto; /* Add horizontal scrolling when necessary */
        }
        
        .thumbnail-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Center the thumbnail elements horizontally and vertically */
            margin-right: 10px;
        }
        
        .thumbnail {
            width: 100%;
            max-width: 300px;
            height: auto;
            cursor: pointer;
            object-fit: cover;
        }
        
        .thumbnail-text {
            font-size: 14px;
        }
        
        .header {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
        }
        
        /* Adjust margin-right for the last navbar item */
        .navbar-item:last-child {
            margin-right: 0;
        }
    </style>
</head>
<body>
   <div class="header">
      <!-- Content of the header -->
      <h1>Test Site </h1>
  </div>
  
  <div class="navbar">
      <div class="navbar-item">Profile</div>
      <div class="navbar-item">Contact</div>
      <div class="dropdown">
          <!-- Dropdown menu trigger element -->
          <span class="navbar-item" >Artworks</span>
          
          <!-- Dropdown menu content -->
          <div class="dropdown-content">
              <div class="thumbnails-row">
                  <!-- Thumbnail items -->
                  <div class="thumbnail-container">
                      <img src="/images/1.webp" alt="Thumbnail 1" class="thumbnail">
                      <span class="thumbnail-text">Text 1</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="/images/2.webp" alt="Thumbnail 2" class="thumbnail">
                      <span class="thumbnail-text">Text 2</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="/images/3.webp" alt="Thumbnail 3" class="thumbnail">
                      <span class="thumbnail-text">Text 3</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="/images/4.webp" alt="Thumbnail 4" class="thumbnail">
                      <span class="thumbnail-text">Text 4</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="images/5.webp" alt="Thumbnail 5" class="thumbnail">
                      <span class="thumbnail-text">Text 5</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="navbar-item">Store</div>
      <div class="navbar-item">CV</div>
  </div>
</body>
</html>

我将.dropdown-content更改为位置：绝对的;但我不知道如何将其格式设置为页面宽度和中心对齐。位置：静态;我得到了想要的对齐结果，但导航栏在艺术品和商店之间有一个间隙。

css

来源：https://stackoverflow.com/questions/76539431/how-do-i-remove-gap-in-navigation-bar-element

2条答案

按热度按时间

nhjlsmyf1#

你只需要从下面的代码更新.dropdown-content。你会得到你想要的

.navbar {
            display: flex;
            justify-content: space-between;
            background-color: #f9f9f9;
            padding: 10px;
            position: static;
        }
        
        .navbar-item {
            margin-right: 10px;
        }
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {           
            position: absolute;
            background-color: #f9f9f9;
             /* Set the width to 500 pixels */
            padding: 10px;            
            left: 50%; /* Center the dropdown horizontally */
            top: 0
            position: absolute;
            transform: translateX(-50%)       
            
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .thumbnails-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap; /* Change to nowrap to keep thumbnails in a single line */
            padding: 5px;
            overflow-x: auto; /* Add horizontal scrolling when necessary */
        }
        
        .thumbnail-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Center the thumbnail elements horizontally and vertically */
            margin-right: 10px;
            width            
        }
        
        .thumbnail {
            width: 100%;
            max-width: 300px;
            height: auto;
            cursor: pointer;
            object-fit: cover;
        }
        
        .thumbnail-text {
            font-size: 14px;
        }
        
        .header {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
        }
        
        /* Adjust margin-right for the last navbar item */
        .navbar-item:last-child {
            margin-right: 0;
        }

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Menu with Thumbnails and Text</title>
</head>
<body>
   <div class="header">
      <!-- Content of the header -->
      <h1>Test Site </h1>
  </div>
  
  <div class="navbar">
      <div class="navbar-item">Profile</div>
      <div class="navbar-item">Contact</div>
      <div class="dropdown">
          <!-- Dropdown menu trigger element -->
          <span class="navbar-item" >Artworks</span>
          
          <!-- Dropdown menu content -->
          <div class="dropdown-content">
              <div class="thumbnails-row">
                  <!-- Thumbnail items -->
                  <div class="thumbnail-container">
                      <img src="/images/1.webp" alt="Thumbnail 1" class="thumbnail">
                      <span class="thumbnail-text">Text 1</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="/images/2.webp" alt="Thumbnail 2" class="thumbnail">
                      <span class="thumbnail-text">Text 2</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="/images/3.webp" alt="Thumbnail 3" class="thumbnail">
                      <span class="thumbnail-text">Text 3</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="/images/4.webp" alt="Thumbnail 4" class="thumbnail">
                      <span class="thumbnail-text">Text 4</span>
                  </div>
                  <div class="thumbnail-container">
                      <img src="images/5.webp" alt="Thumbnail 5" class="thumbnail">
                      <span class="thumbnail-text">Text 5</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="navbar-item">Store</div>
      <div class="navbar-item">CV</div>
  </div>
</body>
</html>

赞(0）回复(0）举报 2023-06-25

qncylg1j2#

基于CBroe的评论，将此答案作为社区Wiki发布。
从.dropdown中取出position: relative;，用以下方法定位.dropdown-content：

position: absolute; 
left: 0; 
right: 0;

然后将.thumbnails-row更改为justify-content: center;

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何删除导航栏元素中的间隙？

2条答案

相关问题

热门标签

最新问答