Как я могу центрировать <ul> по горизонтали?

Question

Как я могу центрировать <ul> по горизонтали?

Как я могу центрировать <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/

-1

html html5 css3 caa

Источник

user1724434 28 окт '16 в 23:39

6 ответов

Другие вопросы по тегам html html5 css3 caa

user6555896 31 окт '16 в 18:22 2016-10-31 18:22 · Answer 1 · 2016-10-31 18:22

Попробуй это:-

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

1

Источник

user6555896 31 окт '16 в 18:22

user851366 28 окт '16 в 23:44 2016-10-28 23:44 · Answer 2 · 2016-10-28 23:44

Сделайте следующие изменения:

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

0

Источник

user851366 28 окт '16 в 23:44

user6889496 29 окт '16 в 04:19 2016-10-29 04:19 · Answer 3 · 2016-10-29 04:19

Просто вставьте это в свой CSS

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

0

Источник

user6889496 29 окт '16 в 04:19

user4459695 28 окт '16 в 23:42 2016-10-28 23:42 · Answer 4 · 2016-10-28 23:42

Просто выровняйте его, установив горизонтальное поле на auto,

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

Если вы хотите центрировать элементы списка внутри ul, использовать этот:

ul {
    text-align: center;
}

ul > li {
    display: inline-block;
}

Сайт, на который вы ссылаетесь, нуждается в элементах, а не в списке.

0

Источник

user4459695 28 окт '16 в 23:42

user6792480 29 окт '16 в 12:18 2016-10-29 12:18 · Answer 5 · 2016-10-29 12:18

Поместите элемент ul в div и используйте "text-align: center;" опора для див. хотя пули будут выглядеть так, как вы, конечно, не захотите, так что используйте опору "стиль: нет"; для списка. ИЛИ применять стили

div{
           margin-left: 50%;   
}

0

Источник

user6792480 29 окт '16 в 12:18

user6408843 31 окт '16 в 18:13 2016-10-31 18:13 · Answer 6 · 2016-10-31 18:13

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