Question

在我的页面中，有一个指向右侧的箭头图标，我希望它与我的导航活动菜单对齐。我的导航菜单是垂直的。我将在此处发布一些代码段。我不知道如何对齐，因为分配位置对我不起作用。有人可以帮我吗？

.side-nav-bar {
  height: 100%;
  width: 200px;
  position: unset;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ffffff;
  overflow-x: hidden;
}

.side-nav-bar a {
  padding: 18px 8px 16px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: inline-block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  outline: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #e8e8e8;
  font-family: Malgun Gothic;
}

.side-nav-bar a:hover {
  color: #ffffff;
  background-color: #293c4e;
}

a.active-menu {
  background-color: #293c4e;
  color: #ffffff;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

<div class = "side-nav-bar content">
  <a class = "active-menu" href="#체육학">체육학</a><i class="arrow right"></i>
  <a href="#전공소개">전공소개</a>
  <a href="#졸업 후 진로">졸업 후 진로</a>
  <a href="#졸업 후 진로">교육 프로그램</a>
  <a href="#교수소개">교수소개</a>
</div>

Answer 1

将i标签放在锚标签内，它将起作用

<div class = "side-nav-bar content">
    <a class = "active-menu" href="#체육학">체육학<i class="arrow right"></i></a>
    <a href="#전공소개">전공소개</a>
    <a href="#졸업 후 진로">졸업 후 진로</a>
    <a href="#졸업 후 진로">교육 프로그램</a>
    <a href="#교수소개">교수소개</a>
</div>

Answer 2

选项1：使用CSS

使用position: absolute;top: 23px;right: 10px;到arrow和position:relative到.side-nav-bar

          .side-nav-bar {
               height: 100%;
              width: 200px;
               position: relative;
               z-index: 1;
                     top: 0;
               left: 0;
               background-color: #ffffff;
               overflow-x: hidden;
            }

          .side-nav-bar a  {
              padding: 18px 8px 16px;
              text-decoration: none;
              font-size: 15px;
              color: #818181;
              display: inline-block;
              border: none;
              background: none;
               width: 100%;
              text-align: left;
              outline: none;
              border-bottom-width: 1px;
              border-bottom-style: solid;
              border-color: #e8e8e8;
              font-family: Malgun Gothic;
           }

            .side-nav-bar a:hover {
               color: #ffffff;
            	background-color: #293c4e;
            }

             a.active-menu {
                 background-color: #293c4e;
               	color: #ffffff;
             }
                 .arrow {
      border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
position: absolute;
top: 23px;
right: 10px;
    }

    .right {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }

<div class = "side-nav-bar content">
    	<a class = "active-menu" href="#체육학">체육학</a><i class="arrow right"></i>
    	<a href="#전공소개">전공소개</a>
    	<a href="#졸업 후 진로">졸업 후 진로</a>
    	<a href="#졸업 후 진로">교육 프로그램</a>
    	<a href="#교수소개">교수소개</a>
    </div>

选项2：更改html

将i插入第一个a

             .side-nav-bar {
                   height: 100%;
                  width: 200px;
                   position: relative;
                   z-index: 1;
                         top: 0;
                   left: 0;
                   background-color: #ffffff;
                   overflow-x: hidden;
                }

              .side-nav-bar a  {
                  padding: 18px 8px 16px;
                  text-decoration: none;
                  font-size: 15px;
                  color: #818181;
                  display: inline-block;
                  border: none;
                  background: none;
                   width: 100%;
                  text-align: left;
                  outline: none;
                  border-bottom-width: 1px;
                  border-bottom-style: solid;
                  border-color: #e8e8e8;
                  font-family: Malgun Gothic;
               }

                .side-nav-bar a:hover {
                   color: #ffffff;
                	background-color: #293c4e;
                }

                 a.active-menu {
                     background-color: #293c4e;
                   	color: #ffffff;
                 }
                     .arrow {
          border: solid black;
          border-width: 0 3px 3px 0;
          display: inline-block;
          padding: 3px;
        }

        .right {
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
        }

    <div class = "side-nav-bar content">
        	<a class = "active-menu" href="#체육학">체육학 <i class="arrow right"></i></a>
        	<a href="#전공소개">전공소개</a>
        	<a href="#졸업 후 진로">졸업 후 진로</a>
        	<a href="#졸업 후 진로">교육 프로그램</a>
        	<a href="#교수소개">교수소개</a>
        </div>

화이팅!!

导航栏和箭头彼此不对齐

2 个答案: