CSS Flexbox навигации и поля - PullRequest
Новая
       11

CSS Flexbox навигации и поля

0 голосов
/ 25 сентября 2018

Простая навигация на основе списка с применением display: flex.Первый элемент сместился влево, но по какой-то причине я получил "space" справа.

Я не могу узнать, является ли это margin или padding и какой элементвызывает это.Инспектор кода в Chrome предполагает, что это может быть ul margin-block-start, но я не понимаю, откуда он и не знает, как от него избавиться. 

* {
    box-sizing: border-box;
}

:root {
    font-size: 18px;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {

    text-rendering: geometricPrecision;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #363636;
    font-size: 1em;
    overflow-x: hidden
        /*Chrome*/
}

nav {
    position: fixed;
    width: 100%;
    border: dotted green;
    background-color: #eb1734;
    padding: 2rem;
    z-index:99;
}

nav>ul {
    display: flex;
    justify-content: flex-end;
    border: dotted yellow;
    margin: 0
}

nav>ul>li {
    list-style-type: none;
}

.logo {
    margin-right: auto;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}



.wrapper {
    padding: 0 1rem;
}


.hero {

    width: 100vw;
    height: 100vh;
    max-width: 100%;
    /*to prevent the horizontal overflow*/
    background-color: #eb1734;
    color: #f6f6f6;
    display: table;
    /* and let the ancient aliens centre */

}

.hero h2 {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 1.6rem;
    text-transform: uppercase;
}

.subtitle {

    text-transform: none;
    font-weight: 500;
    font-style: italic;
}

.txt_sm {
    font-size: 0.98rem;
}

.txt_tm {
    font-size: 0.72rem;
}

h1 {
    font-size: 1.8rem
}

h2 {
    font-size: 1.6rem
}

h3 {
    font-size: 1.1rem
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

.arrow {
    display: table;
    position: absolute;
    bottom: 1em;
    left: 50%;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1em;
}

.arrow,
.arrow:visited {
    color: #f6f6f6;
}

.panel {
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    background: #f6f7f8;
}

#welcome {
    text-align: center;
    color: #eb1734;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.5em;
    padding: 4rem 0 3rem;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min--moz-device-pixel-ratio: 1.25),
only screen and (-o-min-device-pixel-ratio: 1.25/1),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 200dpi),
only screen and (min-resolution: 1.25dppx) {}


@media (min-width: 1281px) {

    .wrapper {
        padding: 0 9rem;
    }

}

@media only screen and (max-width:1000px) {
    .grid {
        grid-template-columns: 1fr 1fr;

    }

}

@media only screen and (max-width:800px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
   <header>
        <nav>
            <ul>
                <li class="logo"><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
                <li><a href="#">Section 4</a></li>
                <li><a href="#">Section 4</a></li>
            </ul>
        </nav>
        <section class="hero">
            <h2><span class="title">Praesent elementum feugiat.</span><br>
                <span class="subtitle txt_sm">Suspendisse rhoncus sodales odio vel ultrices.</span>
            </h2>
            <a class="arrow" href="#welcome">&darr;</a>
        </section>
    </header>
    <div class="wrapper home">
        <section id="welcome">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
                pulvinar augue sed elementum iaculis.</p>
        </section>
        <section id="about">
            <h2>Pellentesque viverra sapien</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
                pulvinar augue sed elementum iaculis. Pellentesque viverra sapien vitae ligula lacinia, tincidunt
                vehicula ante mattis. Donec in mauris a libero gravida placerat a at ipsum. Curabitur eu varius odio.
                Sed vitae ultricies enim. Curabitur at fringilla urna, ac blandit eros. Maecenas ut semper quam.
                Suspendisse congue interdum ipsum non elementum. Aenean congue nulla a quam convallis, quis facilisis
                turpis pellentesque. Nulla eros lectus, egestas lacinia risus at, bibendum rhoncus nisi. Maecenas eget
                dignissim urna. Suspendisse rhoncus sodales odio vel ultrices.</p>
            <p>
                Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                Nunc nec quam elit. Nunc ultrices, odio vitae rutrum porta, velit eros sollicitudin leo, non tempus
                felis mi sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                inceptos himenaeos. Sed at gravida tellus, quis imperdiet metus. Cras vehicula tristique egestas. </p>
        </section>
        <h2>Vivamus mollis</h2>
        <section class="grid">

            <section>
                <h3>1</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>2</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>3</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>4</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>5</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>6</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
        </section>
    </div>
    <!--wrapper END-->
    <section class="panel">
        <div class="wrapper">
            <h3>Panel</h3>
            <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                Nunc nec quam elit.</p>
        </div>
        <!--wrapper END-->
    </section>
    <footer class="wrapper">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
            pulvinar augue sed elementum iaculis. Pellentesque viverra sapien vitae ligula lacinia, tincidunt
            vehicula ante mattis. Donec in mauris a libero gravida placerat a at ipsum. Curabitur eu varius odio.
            Sed vitae ultricies enim. Curabitur at fringilla urna, ac blandit eros. Maecenas ut semper quam.
            Suspendisse congue interdum ipsum non elementum. Aenean congue nulla a quam convallis, quis facilisis
            turpis pellentesque. Nulla eros lectus, egestas lacinia risus at, bibendum rhoncus nisi. Maecenas eget
            dignissim urna. Suspendisse rhoncus sodales odio vel ultrices.</p>
    </footer>

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Первый элемент li имеет класс logo.

удаление этого (или класса) решает вашу проблему (если я вас правильно понимаю) 

.logo {
  margin-right: auto;
}

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

0 голосов
/ 25 сентября 2018

ul элементы имеют заполнение по умолчанию, которое вызывает вашу проблему.Если вы добавите padding: 0 к nav>ul, первый гибкий элемент (т.е. будущий логотип) будет выровнен по левому краю - я полагаю, это то, что вы хотите (?). 

* {
    box-sizing: border-box;
}

:root {
    font-size: 18px;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {

    text-rendering: geometricPrecision;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #363636;
    font-size: 1em;
    overflow-x: hidden
        /*Chrome*/
}

nav {
    position: fixed;
    width: 100%;
    border: dotted green;
    background-color: #eb1734;
    padding: 2rem;
    z-index:99;
}

nav>ul {
    display: flex;
    justify-content: flex-end;
    border: dotted yellow;
    margin: 0;
    padding: 0;
}

nav>ul>li {
    list-style-type: none;
}

.logo {
    margin-right: auto;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}



.wrapper {
    padding: 0 1rem;
}


.hero {

    width: 100vw;
    height: 100vh;
    max-width: 100%;
    /*to prevent the horizontal overflow*/
    background-color: #eb1734;
    color: #f6f6f6;
    display: table;
    /* and let the ancient aliens centre */

}

.hero h2 {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 1.6rem;
    text-transform: uppercase;
}

.subtitle {

    text-transform: none;
    font-weight: 500;
    font-style: italic;
}

.txt_sm {
    font-size: 0.98rem;
}

.txt_tm {
    font-size: 0.72rem;
}

h1 {
    font-size: 1.8rem
}

h2 {
    font-size: 1.6rem
}

h3 {
    font-size: 1.1rem
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

.arrow {
    display: table;
    position: absolute;
    bottom: 1em;
    left: 50%;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1em;
}

.arrow,
.arrow:visited {
    color: #f6f6f6;
}

.panel {
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    background: #f6f7f8;
}

#welcome {
    text-align: center;
    color: #eb1734;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.5em;
    padding: 4rem 0 3rem;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min--moz-device-pixel-ratio: 1.25),
only screen and (-o-min-device-pixel-ratio: 1.25/1),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 200dpi),
only screen and (min-resolution: 1.25dppx) {}


@media (min-width: 1281px) {

    .wrapper {
        padding: 0 9rem;
    }

}

@media only screen and (max-width:1000px) {
    .grid {
        grid-template-columns: 1fr 1fr;

    }

}

@media only screen and (max-width:800px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
<header>
        <nav>
            <ul>
                <li class="logo"><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
                <li><a href="#">Section 4</a></li>
                <li><a href="#">Section 4</a></li>
            </ul>
        </nav>
        <section class="hero">
            <h2><span class="title">Praesent elementum feugiat.</span><br>
                <span class="subtitle txt_sm">Suspendisse rhoncus sodales odio vel ultrices.</span>
            </h2>
            <a class="arrow" href="#welcome">&darr;</a>
        </section>
    </header>
    <div class="wrapper home">
        <section id="welcome">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
                pulvinar augue sed elementum iaculis.</p>
        </section>
        <section id="about">
            <h2>Pellentesque viverra sapien</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
                pulvinar augue sed elementum iaculis. Pellentesque viverra sapien vitae ligula lacinia, tincidunt
                vehicula ante mattis. Donec in mauris a libero gravida placerat a at ipsum. Curabitur eu varius odio.
                Sed vitae ultricies enim. Curabitur at fringilla urna, ac blandit eros. Maecenas ut semper quam.
                Suspendisse congue interdum ipsum non elementum. Aenean congue nulla a quam convallis, quis facilisis
                turpis pellentesque. Nulla eros lectus, egestas lacinia risus at, bibendum rhoncus nisi. Maecenas eget
                dignissim urna. Suspendisse rhoncus sodales odio vel ultrices.</p>
            <p>
                Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                Nunc nec quam elit. Nunc ultrices, odio vitae rutrum porta, velit eros sollicitudin leo, non tempus
                felis mi sit amet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                inceptos himenaeos. Sed at gravida tellus, quis imperdiet metus. Cras vehicula tristique egestas. </p>
        </section>
        <h2>Vivamus mollis</h2>
        <section class="grid">

            <section>
                <h3>1</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>2</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>3</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>4</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>5</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
            <section>
                <h3>6</h3>
                <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                    nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                    hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                    Nunc nec quam elit.</p>
            </section>
        </section>
    </div>
    <!--wrapper END-->
    <section class="panel">
        <div class="wrapper">
            <h3>Panel</h3>
            <p>Praesent elementum feugiat tincidunt. Phasellus pharetra est urna, fringilla venenatis velit iaculis
                nec. Nullam cursus laoreet tempor. Vivamus mollis velit id ultrices pulvinar. Vestibulum dapibus
                hendrerit malesuada. Nulla facilisi. Morbi sed nulla faucibus, interdum arcu sit amet, rhoncus sem.
                Nunc nec quam elit.</p>
        </div>
        <!--wrapper END-->
    </section>
    <footer class="wrapper">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget sem in orci cursus congue. Morbi
            pulvinar augue sed elementum iaculis. Pellentesque viverra sapien vitae ligula lacinia, tincidunt
            vehicula ante mattis. Donec in mauris a libero gravida placerat a at ipsum. Curabitur eu varius odio.
            Sed vitae ultricies enim. Curabitur at fringilla urna, ac blandit eros. Maecenas ut semper quam.
            Suspendisse congue interdum ipsum non elementum. Aenean congue nulla a quam convallis, quis facilisis
            turpis pellentesque. Nulla eros lectus, egestas lacinia risus at, bibendum rhoncus nisi. Maecenas eget
            dignissim urna. Suspendisse rhoncus sodales odio vel ultrices.</p>
    </footer>
0 голосов
/ 25 сентября 2018

установите padding:0 в UL, это стиль CSS по умолчанию в браузере, который необходимо переопределить, установив padding:0 в UL

...