Поля справа с горизонтальной разметкой

Question

Я пытаюсь создать горизонтальный, прокручиваемый макет для моего сайта. Мой код выглядит примерно так

<div id="outerWrapper">
    <div id="innerWrapper" style="position: relative;">
        <div style="width: 200px; position: absolute; top: 0px; left: 0px;">
            some lengthy content!
        </div>
        <div style="width: 200px; position: absolute; top: 0px; left: 220px;">
            some lengthy content!
        </div>
        <div style="width: 200px; position: absolute; top: 0px; left: 440px;">
            some lengthy content!
        </div>

        ...

        <div style="width: 200px; position: absolute; top: 0; left: 1100px;">
            some lengthy content!
        </div>
    </div>
</div>

Сейчас я пытаюсь добавить margin-right для всего контента, поэтому я попытался добавить margin-right как innerWrapper, так и / или externalWrapper, но это игнорируется. поле слева работает. Я на самом деле использовал position: absolute подход вместо float: left чтобы избежать этих проблем, но, кажется, это не работает. Любые идеи, почему я не могу откорректировать содержание? Даже если я явно установлю ширину внутренней или внешней оболочки, она все равно не будет работать.

Интересно, что тело не имеет правильной ширины - ширина тела - это ширина окна браузера, а не ширина упаковщиков.

Следует сказать, что контент (innerWrapper и все, что ниже) создается динамически через JS, если это важно.

Answer 1

Если хочешь горизонт. макет, начните с установки высоты outerWrapper,

Затем установите ваш контент в "страницах", используя элементы списка:

<div id="outerWrapper">
    <ul id="maincontent">
        <li ><a name="p1">Box 1</a></li>
        <li ><a name="p2">Box 2</a></li>
        <li ><a name="p3">Box 3</a></li>
        <li ><a name="p4">Box 4</a></li>
        <li ><a name="p5">Box n</a></li>
    </ul>
</div>

Теперь для навигационной системы вы можете:

<div id="scroll-buttons">
    <a href="#p1">Go to the section 1</a> |
    <a href="#p2">Go to the section 2</a> |
    <a href="#p3">Go to the section 3</a> |
    <a href="#p4">Go to the section 4</a>
</div>

CSS:

#container{
    width:3000px;
    height:400px;
}

#maincontent{
    border:0;
    margin:0;
    padding:0;
}

#maincontent li{
    line-style:none;
    width:240px;
    height:380px;
    padding:10px;
    float:left;
}

#scroll-buttons{position:fixed;}

По поводу вашего вопроса "почему": обратите внимание, что абсолютно позиционированные элементы выходят из дерева структуры DOM. (Кстати, float: делает это тоже).

Answer 2

попробуй это. Может быть, поможет в вашем состоянии.

.class
{
margin-right:10px !important; 
}

Answer 3

Вы можете использовать отрицательный margin-left вместо margin-right как это:

#innerWrapper{
    margin-left:-5px;
}