讓導航橫著一排排列css怎麼寫

要讓巡覽列橫著一排排列,可以使用CSS的flexbox佈局。下麵是一個簡單的例子,展示了如何實現這一效果。

首先,HTML部分:

html複製程式碼nbsp;html>
    
    
    
    
    

然後,CSS部分:

css複製程式碼/* styles.css */body {    font-family: Arial, sans-serif;
}nav {    background-color: #333;
}.nav-list {    display: flex;          /* 使用 flexbox 佈局 */
    list-style: none;       /* 移除默認清單樣式 */
    padding: 0;             /* 移除內邊距 */
    margin: 0;              /* 移除外邊距 */}.nav-item {    margin: 0;              /* 確保列表項沒有額外的間距 */}.nav-item a {    display: block;         /* 使連結佔據整個列表項 */
    padding: 15px 20px;     /* 內邊距 */
    color: white;           /* 文字顏色 */
    text-decoration: none;  /* 移除連結底線 */}.nav-item a:hover {    background-color: #575757; /* 懸停效果 */}

在這個例子中:

• nav 元素是巡覽列的容器。

• ul.nav-list 使用了 display: flex; 將其子元素按一行排列。

• li.nav-item 是每個導航項,它們在 ul 內水准排列。

• a 元素的樣式確保了連結看起來美觀,並在懸停時有視覺迴響。

這樣,巡覽列中的各個項目就會橫向排列。你可以根據需要進一步調整樣式。