順序付けられていないリストのヘルプ！この解決策が必要

Question

liの前に箇条書きと余分なスペースを削除するにはどうすればよいですか。

私はlist-style: noneを試してみましたが、これはただ弾丸を取り出して、余分なスペースが残っています。ここにはjsFiddleがあります。

このようなものがありますか？

。

Answer 1

ULタグは、あなたがそれを削除する必要がありますので、ブラウザによって与えられたデフォルトのパディングをとります。 padding:0pxを追加します。

/* -------------------------------------- 
 
    Pricing & Plans 
 
    -------------------------------------- */ 
 

 
.pricing-title { 
 
    color: #272727; 
 
    text-align: center; 
 
    padding: 15px; 
 
    font-family: 'myriadbold'; 
 
    border-bottom: 2px solid #ededed; 
 
} 
 

 
.pricing-price { 
 
    color: #4f4f4f; 
 
    text-align: center; 
 
    font-size: 80px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.pricing-yr { 
 
    font-size: 20px; 
 
    font-family: 'myriadsemibold'; 
 
} 
 

 
.price-bg ul { 
 
    list-style-type: none; 
 
    position: relative; 
 
    left: 0px; 
 
    border-top: 1px solid #eaeaea; 
 
    padding:0px; 
 
} 
 

 
.price-bg ul li { 
 
    position: relative; 
 
    padding: 16px 5px 16px 70px; 
 
    border-bottom: 1px solid #eaeaea; 
 
} 
 

 
.price-bg ul li:before { 
 
    font-family: "fontawesome"; 
 
    content: "\f00d"; 
 
    display: inline-block; 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 52px; 
 
    font-size: 12px; 
 
    color: #ef662f; 
 
    text-align: center; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
.price-bg ul li.tick:before { 
 
    font-family: "fontawesome"; 
 
    content: '\f00c'; 
 
    color: #7ab55c; 
 
} 
 

 
.price-bg ul li:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 52px; 
 
    bottom: 0; 
 
    width: 1px; 
 
    background: #eaeaea; 
 
} 
 

 
.price-bg { 
 
    background-color: white; 
 
    border-radius: 7px; 
 
    width: 100%; 
 
    border: 1px solid #eaeaea; 
 
    -webkit-box-shadow: 0px 2px 4px 0px rgba(148,148,148,0.4); 
 
    -moz-box-shadow: 0px 2px 4px 0px rgba(148,148,148,0.4); 
 
    box-shadow: 0px 2px 4px 0px rgba(148,148,148,0.4); 
 
}

<section class="container"> 
 
     <h3>SUBHEADING</h3> 
 
     <h1>Simple Pricing for All</h1> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <div class="price-bg"> 
 
        <h3 class="pricing-title">BASIC PACKAGE</h3> 
 
        <h1 class="pricing-price">£150<span class="pricing-yr">yr</span></h1> 
 
        <ul> 
 
         <li class="tick">3x iBeacons<span>+ £30 for additional iBeacon</span></li> 
 
        </ul> 
 
        <p>APP FEATURES</p> 
 
        <ul> 
 
         <li class="tick">Smart Quiz</li> 
 
         <li>Educational Tasks</li> 
 
         <li>Interactive Gallery Game</li> 
 
         <li>Brand Customisation</li> 
 
         <li>Removed Watermark</li> 
 
        </ul> 
 
        <p>PACKAGE SUPPORT</p> 
 
        <ul> 
 
         <li>All Future Features/Content<span>+ exclusive content</span</li> 
 
         <li class="tick">Unlimited, free 24 hour support</li> 
 
         <li class="tick">Unlimited Users</li> 
 
         <li class="tick">Free Maintenance</li> 
 
         <li class="tick">No setup fees</li> 
 
        </ul> 
 
        <p>EXTRA ADD-ONS (OPTIONAL)</p> 
 
        <ul> 
 
         <li>Step by Step Videos</li> 
 
         <li>Content Request<span>(Our team will update the apps 
 
content for you)</span></li> 
 
         <li>Workshop<span>+ step by step videos</span></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <div class="price-bg"> 
 
        
 
       </div> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <div class="price-bg"> 
 
        
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 2

だけ（.price-BG UL）のためのパディング左0 を追加

Answer 3

それが原因で、リスト項目のデフォルトのマージンとパディングのだ.price-bg ul

Answer 4

にpadding-left: 0px;を追加します。

marginとpaddingから0を.price-bg ulにリセットします。

class="list-unstyled" 

あなたのULへ：ここでは、ブートストラップを使用している場合は、あなたがクラスを追加することができます他の回答に追加updated fiddle

.price-bg ul { 
    list-style: none; 
    position: relative; 
    left: 0px; 
    margin: 0; 
    padding: 0; 
    border-top: 1px solid #eaeaea; 
} 

Answer 5

です。