مساحة حرة في القائمة العلوية، كما تمت إزالتها؟[ينسخ]

StackOverflow https://stackoverflow.com//questions/21068277

  •  26-12-2019
  •  | 
  •  

سؤال

في القائمة العلوية "عروض الأسعار الخاصة بي ..." يتم عرض مساحة خالية على جميع الجوانب باعتبارها نظيفة وتملأ الجزء العلوي بالكامل بالكامل؟

لغة البرمجة

        <ul class="topPanel">
        <li><h2>My Quotes</h2></li>
        <li><h2>LOGIN WITH 
          <a href="#" class="underline">EMAIL</a> 
          OR 
          <a href="#" class="underline">TWITTER</a>
          </h2>
      </li>
    </ul>

CSS

    <!-- /*Main settings, background*/ -->
html {
    background: url(http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/Rainbow-lanscape-nature-scenery-images-new-desktop-hd-wallpapers-landscape-widescreen.jpg) no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
 }
<!-- /*top panel contains a name for the project from the left side and the 
ability to login via twitter and email*/ -->
.topPanel {
    list-style: none;
    margin: 0;

    color: #ffffff;
    background: #000000;

    padding:0px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}
    .topPanel li {
        margin: auto;
    }
        .topPanel li h2 {
            padding: 0 10px;
            margin: 3px;
            text-align: center;
        }
        /*Change the color of links when you hover*/
        .underline {
            color: #ffffff;
            text-decoration: underline;

            transition:color 1s;
            -webkit-transition:color 1s; 
        }
            .underline:hover {
                color: #eb005f;
            }
@media all and (max-width: 800px) {
    .topPanel {
        justify-content: space-around;
    }
}
@media (max-width: 600px) {
    .topPanel {
        -webkit-flex-flow: column wrap;
    }
}

Margin: 0 لا يعمل.لقد لاحظت أنه في بعض الأحيان لا تظهر المساحة التي يمكن أن تكون؟

تم اختباره في Chrome وFirefox، نفس الوضع مع عرض غير صحيح. بصريا، يمكنك أن ترى هنا.

هل كانت مفيدة؟

المحلول

تحتاج إلى إعادة تعيين الافتراضي body الهامش والحشو

body
{
  margin:0;
  padding:0;
}

تجريبي

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top