iT邦幫忙

0

導航欄文字靠左居中+<div>需要包圍<ul>嗎?

1.請問我該怎麼導航欄的文字靠左居中呢?文字離左邊太近了+離上面太近了(要居中)
2.我看網路上很多人做導航欄,都會用div包圍ul,這是必須的嗎?又有什麼意義呢?
3.還有,要怎麼點擊導航欄後,跳轉到指定頁面呢?(不是開新分頁)

HTML的body內程式碼:

<div class="diver">
        <ul class="bar_ul">
            <li class="bar_li">
              <a class="bar_a" aria-current="page" href="#">部落格</a>
            </li>
            <li class="bar_li">
              <a class="bar_a" href="#">服務</a>
            </li>
            <li class="bar_li">
                <a class="bar_a" aria-current="page" href="#">關於Inspi.</a>
              </li>
          </ul>
        </div>

CSS程式碼:

a{
    text-decoration: none;
    color:#ffffff;
    font-size: 30px;
}
.bar_ul{
    background-color: royalblue;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100px;
    position:fixed;
    right: 0;
    left: 0;
    top: 0%;
}
.bar_li{
    display: inline-block;
}

https://ithelp.ithome.com.tw/upload/images/20210812/20140542OH7mPW3d2v.png
#更新於8月12日上午11點02分
https://ithelp.ithome.com.tw/upload/images/20210812/201405425Dj1L7B6cV.png

看更多先前的討論...收起先前的討論...
https://codepen.io/jonesleeinfo/pen/zYweMmN
範例如上
導航列 在 HTML5 不該用 DIV 要用 NAV 包
我範例寫了兩種,一種是 NAV 一種直接用 UL
問題就是樓主要用哪一種而已,基本上個人建議用 NAV
基本上一個網頁寫完,裡面的物件會多如牛毛,
如果特定物件沒有特定標籤,很容易發生選擇器選擇到錯誤的物件
除非你對多如牛毛的物件熟到不行,不然該用正確標籤的地方還是要用
你不要同樣的 UL 卻用一大堆不同的表示方式,你應該要去看哪個地方的 UL 是這麼表現,這樣CSS有一個基本的命名邏輯下來,你之後就不會發生選擇器錯誤還要找怎麼修正的狀況
<nav class="nav">
<a class="bar_a" aria-current="page" href="#">部落格</a>
<a class="bar_a" href="#">服務</a>
<a class="bar_a" aria-current="page" href="#">關於Inspi.</a>
</nav>
這是我修改過後的HTML中body的程式碼,那我要怎麼讓他離左邊有點距離,並且置中呢?
.bar_a{
text-decoration: none;
color: white;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0.5px;
font-size: 33px;
}
nav{

background-color: rgb(106, 141, 90);
height: 12.7%;
position: fixed;
top: 0;
right: 0;
left: 0;
user-select: none;
letter-spacing: 50px;
}
這是我修改過的CSS
更新過的網站我放圖片在上面
如果不想靠太左邊就用margin-left吧...至於垂直置中的部分我習慣用display:flex+align-items: center; 給你參考一下
https://www.oxxostudio.tw/articles/201501/css-flexbox.html
CSS 的盒子定義,建議樓主去看一下
https://www.1keydata.com/css-tutorial/tw/box-model.php 這邊有說明
物件內的內容怎麼定位,物件本身怎麼定位,看一下盒子定義會明白很多
然後 flex 模式的觀念要用的好的話最好載入CSS 框架來跑會比較快
也不需要去定義太多的 CSS,大致上這樣,思考一下,你的進步會越來越大

範例我補上去了,第三種,nav 包 幾個 a 項目,項目置中
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
Todd
iT邦新手 1 級 ‧ 2021-08-12 12:39:51
最佳解答
  1. 把div想成一個容器,裡面的元件的間距都是用這個容器來控制
    所以可以在外面那層div設置padding-left讓這個容器的左邊有一個留白的間距
    如果要垂直置中是建議用flex的寫法
display:flex;
align-items:center;
  1. 非必要,沒有規定一定要如何實作 navigation bar 但現在html5通常是用nav這個標籤做啦,然後通常最外面包div都是為了好控制樣式,至於裡面的元素要不要用ul li 實作,現代來說應該沒什麼必要,我反而習慣裡面都是div還比較好客制樣式。
  2. a裡面的target設置為 '_self' <a target='_self'>
    但我記得預設應該是_self了。
看更多先前的回應...收起先前的回應...

對不起,我是個新手+菜鳥 : (
請問您能跟我說明一下<a target='_self'>嗎?

<a target='_self'>可以取代aria-current="page"嗎?

aria-current="page" 用在 Breadcrumbs
target='_self'是不一樣的東西
target='_self' 是按下連結在當前的頁面開啟
這是預設值不需要下,如果要開新頁面 要下target='_blank'

Todd iT邦新手 1 級 ‧ 2021-08-12 15:17:15 檢舉

這兩個是不一樣的功用
a的target 是指這個連結要在哪裡打開
https://www.w3schools.com/tags/att_a_target.asp

aria-current 通常是在實作breadcrumb時會加這個屬性,但跟超連結本身的行為沒有特別關聯
https://developer.mozilla.org/zh-TW/docs/Learn/Accessibility/WAI-ARIA_basics

WAI-ARIA這類的標籤,基本上是為了無障礙網頁讓網站的可訪問性提高的作用,可以讓一些輔助使用的工具方便解析網站內容。對於大部分的人來說沒有什麼影響。
如果還在學習如何寫網頁,我覺得這塊是可以不用那麼早考慮進去就是了。

0
海綿寶寶
iT邦大神 1 級 ‧ 2021-08-12 09:13:48

https://ithelp.ithome.com.tw/upload/images/20210812/20001787zWALkkvLmj.png

謝謝~修改好了~~

我要發表回答

立即登入回答