文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使整个<li>作为链接可点击

问如何使整个<li>作为链接可点击
EN

Stack Overflow用户

提问于 2022-07-04 12:26:19

回答 4查看 290关注 0票数 1

我有包含链接的导航菜单，我想要实现的是使整个li元素作为一个链接可点击。那么，如何实现这一点呢？我正在使用引导3.2库。下面是HTML和CSS代码。用户希望能够在li html元素中的任何地方单击Link。

.navbar {
     position: relative; 
   min-height: 40px !important; 
     margin-bottom: 20px; 
    border: none !important; 
}


#navbarSupportedContent .nav-item {
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    border-right: 1px solid #01154D;
    padding: 10px 24px;
}

#navbarSupportedContent .nav-item:hover {
    background-color: #DBDDFD;
    color: #000 !important;
}

<div role="navigation">
               <div class="container">
                  <div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
                     <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto" style="float:inherit;">
                                          <li class="nav-item active">
                                             <a class="nav-link" href="/webcenter/portal/dummy/pages_en">
                                                <span id="submenu1">Home</span>
                                             </a>
                                          </li>
                                          <li class="nav-item ">
                                             <a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
                                                <span id="submenu1">Employee Tools</span>
                                             </a>
                                          </li>
                                          <li class="nav-item ">
                                             <div class="dropdown show">
                                                <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
                                                <div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
                                                </div>
                                             </div>
                                          </li>
                                          <li class="nav-item ">
                                             <a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
                                                <span id="submenu1">Documents</span>
                                             </a>
                                          </li>
                           <li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
                                 <i aria-hidden="true" class="fa fa-language"></i></a>
                           </li>
                           <li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
                           </li>
                        </ul><span id="T:search2" class="x1a">
                           <div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
                           </div></span>
                     </div>
                  </nav></div>
               </div>
</div>

html

css

twitter-bootstrap-3

回答 4

Stack Overflow用户

发布于 2022-07-04 13:09:02

删除li填充并添加宽度100%，并将标记填充到中。

li.nav-item > a, li.nav-item > .dropdown show a{
    display: block;
    width: 100%;
}
 .navbar {
     position: relative; 
   min-height: 40px !important; 
     margin-bottom: 20px; 
    border: none !important; 
}
li.nav-item a{ padding: 10px 0px;}

#navbarSupportedContent .nav-item {
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    border-right: 1px solid #01154D;
    padding: 0px 24px;
}

#navbarSupportedContent .nav-item:hover {
    background-color: #DBDDFD;
    color: #000 !important;
}

<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
   <a class="nav-link" href="/webcenter/portal/dummy/pages_en">
      <span id="submenu1">Home</span>
   </a>
</li>
<li class="nav-item ">
   <a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
      <span id="submenu1">Employee Tools</span>
   </a>
</li>
<li class="nav-item ">
   <div class="dropdown show">
      <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
      <div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
            <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
            <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
            <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
            <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
      </div>
   </div>
</li>
<li class="nav-item ">
   <a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
      <span id="submenu1">Documents</span>
   </a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>

票数 1

Stack Overflow用户

发布于 2022-07-04 12:32:42

不要渲染大的<li>，而是<a>。锚元素已经具备了提供可访问和非常可用的链接所需的所有绑定。使其变得更大，提高了可用性。

.navbar {
  position: relative;
  min-height: 40px !important;
  margin-bottom: 20px;
  border: none !important;
}

#navbarSupportedContent .nav-item {
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
}

#navbarSupportedContent .nav-link {
  display: block;
  border-right: 1px solid #01154D;
  padding: 10px 24px;
}

#navbarSupportedContent .nav-link:hover {
  background-color: #DBDDFD;
  color: #000 !important;
}

<div role="navigation">
  <div class="container">
    <div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;">
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" style="float:inherit;">
            <li class="nav-item active">
              <a class="nav-link" href="/webcenter/portal/dummy/pages_en">
                <span id="submenu1">Home</span>
              </a>
            </li>
            <li class="nav-item ">
              <a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
                <span id="submenu1">Employee Tools</span>
              </a>
            </li>
            <li class="nav-item ">
              <div class="dropdown show">
                <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
                <div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
                  <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
                  <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
                  <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
                  <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
                </div>
              </div>
            </li>
            <li class="nav-item ">
              <a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
                <span id="submenu1">Documents</span>
              </a>
            </li>
            <li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
                                 <i aria-hidden="true" class="fa fa-language"></i></a>
            </li>
            <li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
            </li>
          </ul><span id="T:search2" class="x1a">
                           <div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
                           </div></span>
        </div>
      </nav>
    </div>
  </div>
</div>

票数 0

Stack Overflow用户

发布于 2022-07-04 12:33:32

因此，一个简单的CSS解决方案将是；

从li元素中移除填充。
使a标记成为一个块，并给它100%的宽度

。

.navbar {
  position: relative; 
  min-height: 40px !important; 
  margin-bottom: 20px; 
 border: none !important; 
}


#navbarSupportedContent .nav-item {
 text-transform: uppercase;
 text-align: center;
 font-weight: 800;
 border-right: 1px solid #01154D;
 padding: 0;
}

#navbarSupportedContent .nav-item:hover {
 background-color: #DBDDFD;
 color: #000 !important;
}

#navbarSupportedContent .nav-item a {
 display: block;
 width: 100%;
 padding: 10px 24px; // removed from list and added here for same visual effect
}

<div role="navigation">
               <div class="container">
                  <div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
                     <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto" style="float:inherit;">
                                          <li class="nav-item active">
                                             <a class="nav-link" href="/webcenter/portal/dummy/pages_en">
                                                <span id="submenu1">Home</span>
                                             </a>
                                          </li>
                                          <li class="nav-item ">
                                             <a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
                                                <span id="submenu1">Employee Tools</span>
                                             </a>
                                          </li>
                                          <li class="nav-item ">
                                             <div class="dropdown show">
                                                <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
                                                <div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
                                                      <a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
                                                </div>
                                             </div>
                                          </li>
                                          <li class="nav-item ">
                                             <a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
                                                <span id="submenu1">Documents</span>
                                             </a>
                                          </li>
                           <li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
                                 <i aria-hidden="true" class="fa fa-language"></i></a>
                           </li>
                           <li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
                           </li>
                        </ul><span id="T:search2" class="x1a">
                           <div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
                           </div></span>
                     </div>
                  </nav></div>
               </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72856747

复制

相似问题

问如何使整个<li>作为链接可点击
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使整个<li>作为链接可点击EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使整个<li>作为链接可点击
EN