如何用ul和li对齐文本

debugcn 发表于 Dev

内纳德·特兰科维奇（Nenad Trailovic）

我在一排的col-md-3类中有4个Div，但是文本确实看起来很丑。我在这里做了一点概述：

 Prod.      Comp.    (middle)    lang.     div4
   text     texttext              text     text
 textta       text                 txt      txt

这表示文字不在 /产品，公司，languange和第4部门

我想让它看起来像这样

 div1      div2     (middle)    div3     div4
 text      texttext             text     text
 textta    text                 txt      txt

这是我的代码

HTML：

<div class="container">
            <div class="row" id="footerRow">

                 <div class="col-xs-12 col-md-3">
                    <h2>Product</h2>
                    <ul>
                        <li> <a href="templates.php">Templates</a></li> 
                        <li> <a href="pricing.php">Pricing</a></li>
                    </ul>
                </div>

                 <div class="col-xs-12 col-md-3">
                    <h2>Company</h2>
                        <ul>
                            <li><a href="aboutus.php">About Us</a></li>
                            <li><a href="contact.php">Contact us</a></li>
                            <li><a href="terms.php">Terms of Servise</a></li>
                            <li><a href="policy.php">Privacy policy</a></li>
                        </ul>
                </div>

                 <div class="col-xs-12 col-md-3">
                    <h2>Language</h2>
                        <ul>
                            <li><a href="login.php">Englisch</a></li>
                            <li><a href="login.php">German</a></li>
                            <li><a href="login.php">Srpski</a></li>
                        </ul>
                </div>          

                 <div class="col-xs-12 col-md-3">
                    <h2> </h2>
                        <ul>
                            <li><a href="login.php">facebook</a></li>
                            <li><a href="login.php">kaaa</a></li>
                            <li><a href="login.php">kaaa</a></li>
                        </ul>
                </div>  

            </div>
        </div>

这是我的CSS代码：

#footerRow{
  text-align: center;
}

如果可能，解决方案应该是响应式引导！

Charantej Golla

删除padding并margin设置为零。删除text-align:center为#footerRow

#footerRow ul {margin:0px;padding:0px}
#footerRow ul li{
  text-align: left;
  list-style:none
}
#footerRow h2{min-height:30px}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" id="footerRow">
      <div class="col-xs-12 col-md-3">
        <h2>Product</h2>
        <ul>
          <li> <a href="templates.php">Templates</a></li> 
          <li> <a href="pricing.php">Pricing</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-3">
        <h2>Company</h2>
        <ul>
          <li><a href="aboutus.php">About Us</a></li>
          <li><a href="contact.php">Contact us</a></li>
          <li><a href="terms.php">Terms of Servise</a></li>
          <li><a href="policy.php">Privacy policy</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-3">
        <h2>Language</h2>
        <ul>
          <li><a href="login.php">Englisch</a></li>
          <li><a href="login.php">German</a></li>
          <li><a href="login.php">Srpski</a></li>
        </ul>
      </div>          
      <div class="col-xs-12 col-md-3">
        <h2> </h2>
        <ul>
          <li><a href="login.php">facebook</a></li>
          <li><a href="login.php">kaaa</a></li>
          <li><a href="login.php">kaaa</a></li>
        </ul>
      </div>  
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。