Как выровнять ul по центру в Skeleton?

Очень новичок в интерфейсе. Я разрабатываю свой сайт с помощью Skeleton Responsive Framework, и мне не удается расположить навигацию нижнего колонтитула в центре мобильного макета. В настоящее время он выравнивается по левому краю.

Я предполагаю, что я что-то нацеливаю неправильно. Кто-нибудь может помочь?

Вот код, который я использую:

<div class="band bottom">
     <footer class="container last">
         <hr>       
            <div class="sixteen footer-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>           
            </div>

            <div class="eight columns credit">
               <p>&copy; 2013 Jacob Taylor</p>
            </div>

     </footer> <! --- End Container --->
</div>  <! --- End Band --->

А вот CSS для настольной и мобильной версий соответственно:

/* Footer */

.bottom footer {
    font-size: 12px;
}

div.footer-nav ul,
div.footer-nav ul li {
    margin: 0px;
}

div.footer-nav ul li {
    display:inline;
    float: left;
    position: relative;
}

div.footer-nav ul li a {
    display:inline-block;
    padding: 0px 21px 21px 0px;
    color: #2f3239; 
    text-decoration: none;
}

div.footer-nav ul li a:hover {
    color: #2f3239;
    text-decoration: underline;
    cursor: pointer;

}

div.credit {
    text-align: right;
}

/* Footer */    

footer.last,
div.credit,
div.footer-nav {
    text-align: center;
}

div.footer-nav ul {
    text-align:center;  
}

html css skeleton-css-boilerplate
person Jacob Taylor    schedule 04.07.2013    source источник
comment
Ваш <footer class="container last"> занимает 100% ширины. Уменьшите его и выровняйте по центру <div class="band bottom" align="center">   -  person mohkhan    schedule 04.07.2013

Ответы (2)


arrow_upward
0
arrow_downward

Удалите класс .sixteen из .footer-nav и установите для него значение меньше 100%, то есть, возможно, десять, и добавьте margin: 0 auto в .footer-nav

person Neil    schedule 04.07.2013
comment
Внес эти изменения, как было предложено. Похоже, это не имело значения. Есть ли что-нибудь в Skeleton, что мне может понадобиться сбросить? Это только кажется эффектом сущности ul. P in .credit находится в центре внимания. - person Jacob Taylor; 05.07.2013
comment
Пожалуйста, проверьте, есть ли у Ul значение float: left и назначенное ему заполнение, если это так, замените его на float: none; заполнение: 0 - person Neil; 05.07.2013

arrow_upward
0
arrow_downward

Глядя на ваш код, похоже, что вы пытаетесь использовать для списка объект из 16 столбцов. Уменьшите количество столбцов до менее чем двенадцати столбцов. И убедитесь, что вы используете класс «columns», чтобы сетка заработала.

<div class="band bottom">
 <footer class="container last footer">
        <hr>
        <div class="twelve columns footer__links">
            <ul class="nav--footer">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Instagram</a></li>
            </ul>           
        </div>
        <div class="four columns">
            <div class="credit">&copy; 2013 Jacob Taylor</div>
        </div>
    </footer>
</div>

С другой стороны, ваш css кажется очень многословным и запутанным. Взгляните на отредактированную версию вашего CSS и разметки. В идеале мы хотим избежать каких-либо дополнительных селекторов-потомков и вызова неквалифицированного элемента, например, "div.class_name" при написании правила.

.footer {
    font-size: 12px;
}
.footer__links {
    text-align: center;
}
.nav--footer{
    margin: 0;
    padding: 0;
    display: inline;
}
.nav--footer li {
    display:inline;
    margin-right: 4em;
}
.nav--footer a {
    text-decoration: none;
    color: #2f3239; 
}
.nav--footer a:hover {
    color: #2f3239;
    text-decoration: underline;
    cursor: pointer;

}
.credit {
    text-align: right;
}
person Daniel Rhees    schedule 04.07.2013