Используя точные проценты и размер шрифта: 0, чтобы сетки идеально подходили?

Question

Я пытаюсь работать с сетками, которые представляют собой целые числа, которые идеально совпадают, например, 20% для 5 пунктов меню заполнят 100%.

У меня такой код:

#menu-primary-navigation li{display:inline-block;font-size:0;width:20%;}
#menu-primary-navigation li a{font-size:22px;}

Я понимаю проблему пробелов между элементами ul li, что означает, что 20% элементов не помещаются в 100% из-за пробелов между каждым элементом. Однако я думал, что решил эту проблему, создав font-size:0; там, где располагаются элементы, а затем установил только размер шрифта внутри элемента.

Тем не менее, вы можете видеть в моем JSFiddle, что пять пунктов меню все еще не подходят для 100% контейнера.

В моем примере ширина равна 600px, а каждый элемент равен 20%. Изучая элементы, я вижу, что все они равны 120px. Хорошо 120 x 5 = 600, так почему же последний элемент всегда попадает на следующую строку?

<div class="wrapper">
    <ul id="menu-primary-navigation" class="menu">
        <li class="menu-item">
            <a href="http://localhost/esk/">Home</a>
        </li>
        <li class="menu-item">
            <a href="http://localhost/esk/knitting/">Tutorials</a>
        </li>
        <li class="menu-item">
            <a>Logo</a>
        </li>
        <li class="menu-item">
            <a href="http://localhost/esk/projects/">Projects</a>
        </li>
        <li class="menu-item">
            <a href="http://localhost/esk/articles/">Articles</a>
        </li>
    </ul>
</div>

http://jsfiddle.net/franhaselden/kq9o4t0v/

html css responsive-design whitespace

1

Francesca 10 Фев 2015 в 16:32

Answer 1

Использование display: inline-block; в этой ситуации, как известно, проблематично. Вы можете рассмотреть возможность использования display: table-cell; для достижения того же результата с меньшими усилиями.

HTML может остаться прежним, но попробуйте этот CSS:

.wrapper{width:600px;}
ul,li{padding:0;margin:0;}
/* needed for use with display: table-cell; */
.menu{ display: table; width: 100%; }
/* changed to table-cell */
#menu-primary-navigation li{display:table-cell; text-align: center;}
#menu-primary-navigation li a{font-size:22px;}

Однако, поскольку я должен отвечать на вопрос, часть, в которой вы ошиблись, заключается в том, что вам нужно установить размер шрифта для родительского элемента, то есть ul, чтобы задействовать пробел. Однако учтите, я думаю, что некоторым версиям IE не понравится font-size: 0;

CSS:

.wrapper{width:600px;}
/* you need it set on the parent */
ul,li{padding:0;margin:0; font-size: 0; }
#menu-primary-navigation li{display: inline-block; width: 20%; text-align: center;}
#menu-primary-navigation li a{font-size:22px;}

1

Doidgey 10 Фев 2015 в 13:36

Answer 2

Вы устанавливаете font-size:0 в теге li, чтобы удалить пробелы. Однако li содержатся в ul, поэтому вам нужно установить размер шрифта там.

В вашем jsfiddle проблема решается путем установки

.wrapper{width:600px;} ul,li{padding:0;margin:0;font-size:0}

1

Philip Smith 12 Фев 2015 в 12:59

Используя точные проценты и размер шрифта: 0, чтобы сетки идеально подходили?

2 ответа

Похожие вопросы

Новые вопросы

html