私のハイパーリンクテキストは、私のリンク弾丸リスト

Question

に妙に表示されます上のハイパーテキストの位置より下になります。 1行目と同じ場所から開始されません。 2行目はどのように右にインデントされますか？

<ul class="nav navbar-nav navbar-left collapse navbar-collapse mega" id="navbar-collapse3"> 
       <li> 
        <div class="mega-menu"> 
         <div class="row"> 
           <div class="col-sm-3"> 
            <ul> 
              <li><a href="/netv&#230;rk">This is a very goog</a></li> 
              <li><a href="/ida-global-business-networks">UPS Global Transtup Transtup</a></li> 
            </ul> 
           </div> 
         </div> 
        </div> 
       </li> 
      </ul> 

彼女のER CSSがKODEN：

nav.navbar .navbar-nav.mega .mega-menu li a { 
    color: #d9d9d9; 
} 

nav.navbar .navbar-nav.mega .mega-menu li a { 
    font-size: 16px; 
    font-weight: 400; 
} 

a { 
    color: #fd7339; 
    text-decoration: none; 
    background-color: transparent; 
} 


nav.navbar .navbar-nav.mega .mega-menu li:before { 
    content: "\00BB"; 
    padding-right: 5px; 
} 

*, *:hover, *:active { 
    outline: 0 none; 
} 

*:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 


nav.navbar .navbar-nav.mega .mega-menu ul { 
    list-style: none; 
    padding-left: 0; 
} 

ul ul, ol ul, ul ol, ol ol { 
    margin-bottom: 0; 
} 


nav.navbar .navbar-nav.mega .mega-menu { 
    background-color: #454545; 
    width: 1000px; 
    min-height: 325px; 
    left: -166px; 
    z-index: 1; 
    position: absolute; 
    padding: 20px 50px; 
    pointer-events: none; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    -moz-transition: opacity 0.2s ease-in-out; 
    -o-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
} 

nav.navbar .navbar-nav.mega .mega-menu { 
    width: 895px; 
} 



nav.navbar .navbar-nav.mega .mega-menu { 
    background-color: #454545; 
    width: 1000px; 
    min-height: 325px; 
    left: -166px; 
    z-index: 1; 
    position: absolute; 
    padding: 20px 50px; 
    pointer-events: none; 
    overflow: hidden; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    -moz-transition: opacity 0.2s ease-in-out; 
    -o-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
} 

Answer 1

は、あなたがこのような何かをしたいですか？ あなたのli要素のサイズにちょうど新しいクラスボックスを追加しました。私はulのためにあなたのシンボルのスタイルを設定しました。 PS：あなたのコードは画像に似ていません.LIシンボルがポイントです。●

nav.navbar .navbar-nav.mega .mega-menu li a { 
 
    color: #d9d9d9; 
 
} 
 

 
nav.navbar .navbar-nav.mega .mega-menu li a { 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
} 
 

 
a { 
 
    color: #fd7339; 
 
    text-decoration: none; 
 
    background-color: transparent; 
 
} 
 

 

 
nav.navbar .navbar-nav.mega .mega-menu li:before { 
 
    content: "\00BB"; 
 
    padding-right: 5px; 
 
} 
 

 
*, *:hover, *:active { 
 
    outline: 0 none; 
 
} 
 

 
*:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 

 
nav.navbar .navbar-nav.mega .mega-menu ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 
.box{ 
 
    width:200px; 
 
    height:50px; 
 
} 
 
ul ul, ol ul, ul ol, ol ol { 
 
    margin-bottom: 0; 
 
} 
 
ul { 
 
    list-style: none; 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
} 
 

 
li { 
 
    padding-left: 1em; 
 
    text-indent: -1em; 
 
} 
 

 
li:before { 
 
    content: "»"; 
 
    margin:auto; 
 
    padding-right: 5px; 
 
    background-color:rgba(0,0,0,0.4); 
 
} 
 

 
nav.navbar .navbar-nav.mega .mega-menu { 
 
    background-color: #454545; 
 
    width: 1000px; 
 
    min-height: 325px; 
 
    left: -166px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    padding: 20px 50px; 
 
    pointer-events: none; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: opacity 0.2s ease-in-out; 
 
    -moz-transition: opacity 0.2s ease-in-out; 
 
    -o-transition: opacity 0.2s ease-in-out; 
 
    transition: opacity 0.2s ease-in-out; 
 
} 
 

 
nav.navbar .navbar-nav.mega .mega-menu { 
 
    width: 895px; 
 
} 
 

 

 

 
nav.navbar .navbar-nav.mega .mega-menu { 
 
    background-color: #454545; 
 
    width: 1000px; 
 
    min-height: 325px; 
 
    left: -166px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    padding: 20px 50px; 
 
    pointer-events: none; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: opacity 0.2s ease-in-out; 
 
    -moz-transition: opacity 0.2s ease-in-out; 
 
    -o-transition: opacity 0.2s ease-in-out; 
 
    transition: opacity 0.2s ease-in-out; 
 
}

<ul class="nav navbar-nav navbar-left collapse navbar-collapse mega" id="navbar-collapse3"> 
 
        <div class="mega-menu"> 
 
         <div class="row"> 
 
           <div class="col-sm-3 box"> 
 
            <ul> 
 
              <li><a href="/netv&#230;rk">This is a very goog</a></li> 
 
              <li><a href="/ida-global-business-networks">UPS Global Transtup Transtup</a></li> 
 
            </ul> 
 
           </div> 
 
         </div> 
 
        </div> 
 
      </ul>