-1

如何<ul>水平居中？

我有下划线列表，但它似乎与左侧对齐，我想将其居中。

<ul id="give-donation-level-button-wrap" class="give-donation-levels-wrap give-list-inline">
<li><button type="button" data-price-id="1" class=" give-donation-level-btn give-btn give-btn-level-1 give-default-level" value="25.00">$25</button></li>
<li><button type="button" data-price-id="2" class=" give-donation-level-btn give-btn give-btn-level-2 " value="50.00">$50</button></li>
<li><button type="button" data-price-id="3" class=" give-donation-level-btn give-btn give-btn-level-3 " value="75.00">$75</button></li>
</ul>

另外，如何使选定的金额按钮在单击时具有黄色边框？

http://74.220.215.60/~xthrdmac/green/home-4-2/

4

6 回答 6

1

尝试这个：-

ul { text-align: center; }
li { display: inline-block; } /* Don't float them */
于 2016-10-31T18:22:03.047 回答
0

只需将水平边距设置为auto.

ul {
    display: block;
    margin: 0 auto;
}

如果要将列表项居中ul，请使用以下命令：

ul {
    text-align: center;
}

ul > li {
    display: inline-block;
}

您所指的网站需要将项目置于中心位置，而不是列表。

于 2016-10-28T23:42:29.367 回答
0

进行以下更改：

#give-donation-level-button-wrap > li {
  /* float: left; <-- remove*/
  display: inline-block; /* <-- add */ 
}
于 2016-10-28T23:44:20.640 回答
0

将 ul 元素放在 div 中并使用“text-align: center;” div 的道具。尽管子弹会以您肯定不想要的方式出现，但请使用道具“样式：无；” 为列表。或应用样式

div{
           margin-left: 50%;   
}
于 2016-10-29T12:18:37.520 回答
0

只需将其粘贴到您的CSS中

 #give-donation-level-button-wrap > li {
    display: inline-block;
    float: none;
 }
于 2016-10-29T04:19:00.257 回答
0 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style>
        div{
        width:100%;
        }

        ul{
        margin-right: auto;
        margin-left: auto;
        width: 12%;
        }

        ul li{
        float:left;
        list-style:none;
        }

        ul li button{
        outline:none;
        background-color:#eee;
        color:red;
        }

        .off{
        border:1px solid red;
        }
        .on{
        border:1px solid yellow;
        }
    </style>
    <script>
        $(document).ready(function(){
            var selector = 'ul li button';

            $(document).ready(function(){
                $(selector).on('click', function(){
                    $(selector).removeClass('on');
                    $(this).addClass('on');
                });
            });
        });
    </script>
</head>
<body>
     <div>
        <ul>
         <li><button class="off">$200</button></li>
         <li><button class="off">$400</button></li>
         <li><button class="off">$600</button></li>
        </ul>
     </div>
</body>
</html>
于 2016-10-31T18:13:28.770 回答