Question

如何将<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/

Answer 1

只需将水平边距设置为auto即可对齐。

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

如果您想将列表项置于ul中心，请使用：

ul {
    text-align: center;
}

ul > li {
    display: inline-block;
}

您所指的网站需要这些项目居中，而不是列表。

Answer 2

进行以下更改：

#give-donation-level-button-wrap > li {
  /* float: left; <-- remove*/
  display: inline-block; /* <-- add */ 
}

Answer 3

只需将其粘贴到您的css中

即可

 #give-donation-level-button-wrap > li {
    display: inline-block;
    float: none;
 }

Answer 4

将ul元素放在div中并使用“text-align：center;” div的道具。虽然子弹会以某种方式出现，你肯定不会想要，所以可以使用道具“style：none;”列表。或者应用样式

openInputStream()

Answer 5

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

Answer 6

试试这个： -

ul { text-align: center; }
li { display: inline-block; } /* Don't float them */

如何将<ul>水平居中？

6 个答案: