如何使導航項適應小螢屏尺寸

我正在嘗試使導航專案適應較小的螢屏。我試圖給父元素 max-width 100% 但它不起作用。它僅在我打開 display: flex; 時才有效 離開。我需要導航專案受父 widht 限制。

我有以下代碼：

HTML

<nav class="tabs">
    <li>
        <a href="#" class="tab active">
            All
            <span class="badge grey">151</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Started
            <span class="badge grey">128</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            On Hold
            <span class="badge grey">15</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Completed
            <span class="badge grey">8</span>
        </a>
    </li>
</nav>

CSS：

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--color-border);
      gap: 1.5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
    }
    
    .tabs > * {
      flex-shrink: 0;
    }
    
    .tabs .tab {
      padding: 1rem 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    
    .tabs .tab.active {
      color: var(--color-heading);
    }
    
    .tabs .tab.active::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: var(--color-primary);
      position: absolute;
      bottom: 0;
      border-radius: 2px 2px 0 0;
    }

因此，在這張圖片中，您可能會看到我試圖實作但沒有關閉 flex 的結果：

uj5u.com熱心網友回復：

您應該嘗試使用@media (max-width: ...)and there reduction padding,font-size等來獲得想要的結果

uj5u.com熱心網友回復：

flex 將強制所有元素位于同一行。您可以使用flex-wrap讓專案有選擇地轉到下一行。

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
- flex-wrap: nowrap;
  flex-wrap: wrap;
  overflow-x: auto;
}

您還可以選擇flex-direction: column使用 MichaelLearner 的答案選擇性地設定小螢屏。

uj5u.com熱心網友回復：

假設您希望彈性專案在大螢屏上以不同于小螢屏上的方式顯示，請考慮從行更改框的方向（默認為列：

桌面：

.tabs { /* for desktop monitors with lots of with */
  display: flex;
  flex-direction: row;  
}

移動的：

.tabs { /* for thin tall mobile phones */
  display: flex;
  flex-direction: column;  
}

顯示代碼片段

   .tabs {
      display: flex;
      flex-direction: column;  /* setting this to row or column will change the flow of boxes */
      border-bottom: 1px solid var(--color-border);
      gap: 1.5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
    }
    
    .tabs > * {
      flex-shrink: 0;
    }
    
    .tabs .tab {
      padding: 1rem 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    
    .tabs .tab.active {
      color: var(--color-heading);
    }
    
    .tabs .tab.active::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: var(--color-primary);
      position: absolute;
      bottom: 0;
      border-radius: 2px 2px 0 0;
    }

<nav class="tabs">
    <li>
        <a href="#" class="tab active">
            All
            <span class="badge grey">151</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Started
            <span class="badge grey">128</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            On Hold
            <span class="badge grey">15</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Completed
            <span class="badge grey">8</span>
        </a>
    </li>
</nav>

PS。看來您是在嘗試插入影像？（第一行）請再次復制粘貼，直接進入編輯器。堆疊溢位允許這樣做！另外，請在答案中添加您確切希望看到的內容。

標籤：html css

上一篇：在django中具有一對一關系的同時上傳檔案

下一篇：使用文本在單個DIV元素中顯示三種顏色