總效果：

html:

響應式CSS：

/* 網站頭部 */ header { ? ? width: 100%; } header .top { ? ? line-height: 3rem; ? ? padding: 0 1.5rem; ? ? color: #fff; ? ? background: #555; ? ? border-bottom: 1px #ecc000 solid; } header .top .tel { ? ? float: left; } header .top ul { ? ? text-align: right; } header .top ul li { ? ? display: inline-block; } header .top ul li + li { ? ? border-left: 1px solid #999; ? ? margin-left: -3px; } header .top ul li a { ? ? display: inline-block; ? ? padding: 0 1.5rem; ? ? color: #fff; } @media only screen and (max-width: 50em) { ? ? header .top ul li a { ? ? ? ? padding: 0 1rem; ? ? } } @media only screen and (min-width: 30.0625em) and (max-width: 50em) { } @media only screen and (max-width: 30em) { ? ? header .top .tel, ? ? header .top ul li:nth-child(3), ? ? header .top ul li:nth-child(4) { ? ? ? ? display: none; ? ? } } header .main { ? ? padding: 0; } header .main .brand { ? ? float: left; ? ? padding: 1rem 1.5rem 0; } header .main ul { ? ? text-align: right; } header .main ul li { ? ? display: inline-block; ? ? border-left: 1px solid #f0ede9; } header .main ul li a { ? ? display: inline-block; ? ? padding: 0 2.5rem; ? ? line-height: 5.5rem; ? ? font-size: 1.6rem; ? ? font-weight: bold; ? ? color: #7c7a65; ? ? text-decoration: none; } header .main ul li a:hover, header .main ul li a:active, header .main ul li a.active { ? ? color: #ffb300; ? ? background-color: #f8f6f1; } @media only screen and (max-width: 50em) { ? ? header .main .brand { ? ? ? ? float: none; ? ? ? ? display: block; ? ? ? ? padding: 0; ? ? ? ? margin: 1.5rem auto 0.5rem; ? ? ? ? text-align: center; ? ? } ? ? header .main ul { ? ? ? ? text-align: center; ? ? } ? ? header .main ul li { ? ? ? ? border: none; ? ? } ? ? header .main ul li a { ? ? ? ? padding: 0 1.5rem; ? ? } } @media only screen and (max-width: 30em) { ? ? header .main ul li { ? ? ? ? line-height: 3rem; ? ? } ? ? header .main ul li:first-child { ? ? ? ? display: none; ? ? } ? ? header .main ul li a { ? ? ? ? font-weight: normal; ? ? ? ? padding: 0 0.5rem; ? ? } }

總結

以上是生活随笔為你收集整理的html如何在li里加a,li里面嵌套a标签html和css小例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。