如何将文本与 ul & li 对齐答案

【问题标题】：How to align text with ul & li如何将文本与 ul & li 对齐
【发布时间】：2016-11-03 06:32:40
【问题描述】：

我在一行中有 4 个 Div 类 col-md-3 但文字确实看起来很丑陋。我在这里做了一个小概述：

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

这意味着，文本不在 /产品、公司、语言和第四部门下

我想让它看起来像这样

 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;
}

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

【问题讨论】：

从#footerRow div 中删除该属性“text-align:center”，或将其“center”更改为“left”。即“文本对齐：左”。

标签： html css twitter-bootstrap

【解决方案1】：

删除 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>

【讨论】：

【解决方案2】：

只需将中心向左更改

text-align: left

Here 是几个例子。

【讨论】：

【解决方案3】：

看看这是不是你要找的https://jsfiddle.net/DTcHh/26745/

删除

#footerRow{
  text-align: center;
}

【讨论】：

【解决方案4】：

试试这个...

ol, ul {list-style: none;}
#footerRow ul {margin:0px;padding:0px}

<!DOCTYPE html>
<html>
<head>
	<title>Stack Overflow</title>
	<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<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> Div4</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>
</body>
</html>

【讨论】：

【解决方案5】：

Here JSFiddle 这里enter link description here

ul{
  list-style-type: none;
  padding: 0px;
}
#footerRow{
  display: inline-flex;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/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>Social </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>

【讨论】：