Неправильное выравнивание бок о бок

Question

Неправильное выравнивание бок о бок

0

Я пытаюсь создать простой левый макет меню.

Тем не менее, div, содержащий основное содержимое, идеально выравнивается бок о бок с боковым меню.

Боковое меню находится прямо под навигационным меню без зазора.

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

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Left Menu Layout</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
        <meta charset ="UTF-8">
    </head>

<body class="body">

    <header class="main-header">
        <img src="Images/logo.png" alt="Logo" />
        <nav>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="main-content">

        <aside class="side-menu">
            <p>ABC</p>
        </aside>

        <div class="content">   
                <article class="top-content">   
                    <header>
                        <h2><a href="#" title="First Post">First Post</a></h2>
                    </header>                   
                    <footer>
                        <p class="post-info">This post if written by </p>
                    </footer>
                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi </p>
                </article>

                <article class="bottom-content">    
                    <header>
                        <h2><a href="#" title="Second Post">First Post</a></h2>
                    </header>
                    <footer>
                        <p class="post-info">This post if written by </p>
                    </footer>                       
                        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </article>
        </div>  

    </div>

    <footer class="main-footer">
        <p>Copyright &copy; 2013</p>
    </footer>

</body>

</html>

CSS

/* ===========================
   ======= Body style ======== 
   =========================== */

body {
    background-image: url('Images/bg.png');
    color: #000305;
    font-family: Arial;
    text-align: left; 
    margin: 0;
    padding: 0;
    }

.body {
    clear: both; 
    margin: 0 auto; 
    width: 960px;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */

.main-header nav {
    background: #666;
    height: 40px;
}

.main-header nav ul li {
    float: left; 
    display: inline; 
}

.main-header nav a:link, .main-header nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    text-decoration: none;
}

/* ===========================
   ======= Content Area ====== 
   =========================== */

.main-content {
    overflow: hidden;

}

.top-content {
    background-color: #FFF;

}

.bottom-content {
    background-color: #FFF; 

}

.content {
    width: 682px;
    float: left;

}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.side-menu {
    width: 268px;
    float: left;
    background-color: #FFF; 
}

user3043645 19 дек. 2013, в 23:26

Источник

0

в основном из-за вашего h2 jsfiddle.net/LUp5f/1
Huangism 19 дек. 2013, в 22:06

Теги:

html

css

html5

css3

1 ответ

Ещё вопросы

в основном из-за вашего h2 jsfiddle.net/LUp5f/1

Shafiq Jetha · Accepted Answer · 2013-12-19T19-29-00.000Z

A <p> всегда имеет свой запас. Уменьшите маржу вокруг <p> в <aside> и она должна решить проблему.

Вы можете сделать это с помощью <h2> в своем <header> если вам нужно потянуть его ближе к верхней навигации.

Благодарю. Это решило проблему. Я искал сброс CSS, чтобы удалить все предустановленное форматирование.
Я избегаю сброса CSS-файлов лично, потому что тогда вы немного лучше узнаете свои HTML-элементы, сможете понять их причуды и использовать настройки по умолчанию, чтобы сделать ваш CSS немного проще для чтения. Но это полностью личное предпочтение.