مساحة حرة في القائمة العلوية، كما تمت إزالتها؟[ينسخ]
سؤال
في القائمة العلوية "عروض الأسعار الخاصة بي ..." يتم عرض مساحة خالية على جميع الجوانب باعتبارها نظيفة وتملأ الجزء العلوي بالكامل بالكامل؟
لغة البرمجة
<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، نفس الوضع مع عرض غير صحيح. بصريا، يمكنك أن ترى هنا.
المحلول
لا تنتمي إلى StackOverflow