Question

我有一个像下面这样的div我需要使用css对齐单行内的3 ul。

<div id="printEmilCountDiv" >
            <li id="reports-print-email-count">
                <ul id="reports-print-email-count-container">
                    <li>Print count:</li>
                    <li id="printCount"></li>
                </ul>
                <ul >
                    <li>Email count:</li>
                    <li id="emailCount"></li>
                </ul>
                <ul >
                    <li>Other count:</li>
                    <li id="otherCount"></li>
                </ul>
            </li>
    </div>

Answer 1

就像这样

尝试使用此代码

＆＃13;

<ul id="printEmilCountDiv" >
            <li id="reports-print-email-count">
                <ul id="reports-print-email-count-container">
                    <li>Print count:</li>
                    <li id="printCount">po</li>
                </ul>
                <ul >
                    <li>Email count:</li>
                    <li id="emailCount">ec</li>
                </ul>
                <ul >
                    <li>Other count:</li>
                    <li id="otherCount"oc>oc</li>
                </ul>
            </li>
    </ul>

＆＃13;

#printEmilCountDiv, #printEmilCountDiv *{
     list-style-type:none;
      margin:0;padding:0;
    }
    #printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}

 #printEmilCountDiv ul li{display:inline-block;vertical-align:top;}

＆＃13;

或类似

＆＃13;

    <ul id="printEmilCountDiv" >
                <li id="reports-print-email-count">
                    <ul id="reports-print-email-count-container">
                        <li>Print count:</li>
                        <li id="printCount">po</li>
                    </ul>
                    <ul >
                        <li>Email count:</li>
                        <li id="emailCount">ec</li>
                    </ul>
                    <ul >
                        <li>Other count:</li>
                        <li id="otherCount"oc>oc</li>
                    </ul>
                </li>
        </ul>

＆＃13;

class Database {
  protected function encryptData($data) {
    // this is just to give an idea... you could cache the
    // General class, rather than create it on each method call
    // sky's the limit
    $x = new General();
    return $x->encryptData($data);
  }
}

＆＃13;

Answer 2

您可以移除第一个li并将其替换为div。然后应用像;

这样的样式

ul{
  margin-top: 0;
  margin-bottom: 0;
}

削减保证金。 Here 是演示

您可以将float: left;添加到ul或li，以便将它们排成一行，例如 this

Answer 3

首先在每个ul中的2nd li中添加一些计数值然后使用以下CSS为您的html获得更好的结果

    <style type="text/css">
        div li ul li{
            display: inline;
        }
        div li ul{
            display: inline;
        }
    </style>

CSS：将所有ul对齐在div内的单行中

3 个答案: