float left заставляет div набирать 'margin'

Question

float left заставляет div набирать 'margin'

0

У меня есть 5 divs в двух разделителях обертки, и когда я назначаю левый атрибут float для 5 провалов, они набирают "верхний край" из 5, так как в них есть место между верхней частью обертки div и их. Вот мой HTML и CSS

HTML:

<div class="headerMenuWrapper">
    <div class="menuOuterWrapper">
        <div class="menuInnerWrapper" id="menuWrapper">
            <div class="menuItem">Home</div>
            <div class="menuItem">About Us</div>
            <div class="menuItem">Products</div>
            <div class="menuItem">FAQ</div>
            <div class="menuItem">Contact Us</div>
         </div>
     </div>
</div>

CSS:

.menuOuterWrapper{
    margin: auto;
    margin-top: 0;
    width: 95%;
    height: 100%;
 }

 .menuInnerWrapper {
    margin: auto;
    margin-top: 0;
    width: 90%;
    height: 100%;
    background-color: #327CF1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 1px 1px 5px #000000;
  }

.menuItem {
    height: 100%;
    text-align: center;
    border-right: 1px solid #051625;
    float: left;
}

.headerMenuWrapper {
    margin: auto;
    width: 95%;
    height: 50%;
 }

Jean Claude Abela 08 нояб. 2013, в 19:24

Источник

0

Могу ли я предложить: если это главное меню, используя пункты списка. Некоторые примеры плавающих списков для создания меню можно увидеть здесь: css.maxdesign.com.au/listamatic
tahdhaze09 08 нояб. 2013, в 18:06
0

Где вы видите волшебный «верхний край» 5? В Firebug? И вы пытались удалить box-shadow, так как это единственное, что имеет значение 5px в ваших стилях?
Cholesterol 08 нояб. 2013, в 18:15
0

Я решил проблему, так как мне не хватало присваивать родителю значение с плавающей точкой (довольно глупо с моей стороны), но все равно спасибо за помощь :)
Jean Claude Abela 11 нояб. 2013, в 15:51

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

Ещё вопросы

Могу ли я предложить: если это главное меню, используя пункты списка. Некоторые примеры плавающих списков для создания меню можно увидеть здесь: css.maxdesign.com.au/listamatic
Где вы видите волшебный «верхний край» 5? В Firebug? И вы пытались удалить box-shadow, так как это единственное, что имеет значение 5px в ваших стилях?
Я решил проблему, так как мне не хватало присваивать родителю значение с плавающей точкой (довольно глупо с моей стороны), но все равно спасибо за помощь :)

Code Maverick · Answer 1 · 2013-11-08T17-05-00.000Z

Это то, что вы ищите?

В вашей разметке много чего происходит, чего не должно быть.

Я упростил все для вас, используя:

nav
ul
li

Вместо поплавков и полей я использовал:

display: table
display: table-cell
text-align: center

HTML

<nav id="menu">
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Products</li>
        <li>FAQ</li>
        <li>Contact Us</li>
    </ul>
</nav>

CSS

* {
    margin: 0;
    padding: 0;
    border: none;
}
#menu {
    margin: 0 auto;
    text-align: center;
}
#menu > ul {
    display: table;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 1px 1px 5px #000000;
    background: #327CF1;
    width: 100%;
}
#menu ul > li {
    display: table-cell;
    text-align: center;
    border-right: 1px solid white;
    color: white;
}
#menu > ul > li:last-child {
    border: none;
}

RinatMegenbaev · Answer 2 · 2013-11-08T15-31-00.000Z

Использовать сброс настроек стиля браузера для элементов

сокращение для вас

{margin: 0px; padding: 0px; padding: 0px; } }

margin: auto сообщает браузеру автоматически вычислять маржу примера стилей сброса здесь http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/