新手HTML5和CSS3的問題與定位一些圖標

Question

我是新來的，因爲當它第一次來到生活

總之，我學習如何在HTML5此刻代碼& CSS3工作HTML HTML5 & CSS和新建。但碰到了路障...

我想讓我的頁腳背景左側的版權信息和我的瀏覽器圖標右側的頁腳背景....我一直在玩問題9個小時我不放棄，甚至嘗試了一些建議，我發現這裏沒有工作...

如果你想看到實際的頁面，你可以轉到 http://cowboy0629.ddns.net/test

.mainFooter { 
 
    width: 97%; 
 
    float: left; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    background-color: #141476; 
 
    margin: 2% 1.5% 2% 1.5%; 
 
} 
 
.footerIcons img.chrome { 
 
    width: auto; 
 
    height: 20px; 
 
} 
 
.footerIcons img.firefox { 
 
    width: auto; 
 
    height: 23px; 
 
} 
 
.footerIcons img.safari { 
 
    width: auto; 
 
    height: 23px; 
 
} 
 
.footerIcons { 
 
    float: right; 
 
    height: 9px; 
 
} 
 
.footerIcons ul { 
 
    float: right; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
} 
 
.footerIcons li { 
 
    float: right; 
 
    list-style:none; 
 
    margin-left:5px; 
 
} 
 
.footerIcons span p { 
 
    height: 20px; 
 
    float: left; 
 
    color: #3399FF; 
 
    width: 97%; 
 
    margin: 9px; 
 
}

<footer class="mainFooter"> 
 
    <div class="footerIcons"> 
 
    <span> 
 
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com">cowboyDesigns.com</a></p> 
 
    </span> 
 

 
    <ul> \t \t \t 
 
     <li> 
 
     <img class="chrome" src="images/icons/black-chrome-icon.png" alt=""> 
 
     </li> 
 
     <li> 
 
     <img class="firefox" src="images/icons/black-firefox-icon.png" alt=""> 
 
     </li> 
 
     <li> 
 
     <img class="safari" src="images/icons/black-safari-icon2.png" alt=""> 
 
     </li> 
 
    </ul> 
 
    </div> \t 
 
</footer>

Answer 1

上述解決方案將解決問題，但它們似乎更可能是黑客， p和ul是塊元素，默認情況下它們不在同一行中。 你需要設置的，以取代現有的CSS規則的CSS如下

.mainFooter p { 
color: #3399FF; 
display: inline-block; 
margin: 9px; 
} 

.mainFooter ul { 
display: inline-block; 
float: right; 
list-style: none; 
margin: 0 auto; 
} 

.mainFooter img { 
width: 30px; 
height: 30px; 
margin: 5px; 
} 

沒有必要爲每個瀏覽器圖標，相同的寬度和高度，使用圖標單獨的規則。

Answer 2

您可以在<ul>元素上使用相對定位。

.footerIcons ul { 
    position: relative; 
    top: -47px; 
} 

這可能是一個馬虎解決比像做容器大小設置爲30％，並獲得div對齊。

Answer 3

只需將版本部分的css文件中的浮動設置更改爲左側.floatericons即可。

.footerIcons { 
float: left; 
height: 9px; } 

添加這一部分：

.footerIcons ul { 
position: relative; 
top: -47px; 
left:600px; 
float:right;} 

Answer 4

有我能想到的來完成這個多種方式。

這工作：

<footer class="mainFooter"> 
    <ul> 
    <li style="float:left"><a href="http://cowboy0629.ddns.net" title="cowboydesign.com">Copyright © 2017 cowboyDesigns.com</a></li> 
    <li style="float:right"><img class="chrome" src="images/icons/black-chrome-icon.png" alt=""></li> 
    <li style="float:right"><img class="firefox" src="images/icons/black-firefox-icon.png" alt=""></li> 
    <li style="float:right"><img class="safari" src="images/icons/black-safari-icon2.png" alt=""></li> 
    </ul>   
</footer> 

它可以使用一個小愛關於垂直對齊，但它的作品。

我不會設置在導航條鏈接display:inline，因爲這讓他們更難點擊（因爲它們不填滿他們周圍的塊）......我也使用工具CSS的float類，而不是內聯樣式。

浮動和定位是CSS中學習最困難的事情之一，但有一種簡單而快速的方法可以將它整理出來。

看看這個video on using Chrome DevTools as an IDE

你不僅可以看到實時的變化，你甚至可以映射回您的源文件，以便您進行保存更改。

或者你可以使用一個框架，有這樣的事情的解決方案。我是基金會的粉絲，grid and alignment classes將非常適合這個問題。

看來你正在爲學校做這個，所以也許你不能使用框架，但你可以看看他們如何解決問題以及他們使用了什麼代碼。

Answer 5

只是建立在上面你已經創建你將有類似這樣的東西是什麼：

footer { 
 
    width: 97%; 
 
    height: 40px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #141476; 
 
    margin: 2% 1.5%; 
 
} 
 
footer p, 
 
.footerIcons{ 
 
    line-height: 20px; 
 
    margin: 9px; 
 
} 
 
footer p{ 
 
    float: left; 
 
    color: #3399FF; 
 
} 
 
.footerIcons { 
 
    float: right; 
 
} 
 
.footerIcons img.firefox, 
 
.footerIcons img.safari, 
 
.footerIcons img.chrome{ 
 
    width: auto; 
 
    height: 23px; 
 
}

<footer> 
 
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com" target="_blank">cowboyDesigns.com</a></p> 
 
    <div class="footerIcons"> 
 
    <img class="chrome" src="images/icons/black-chrome-icon.png" alt=""> 
 
    <img class="firefox" src="images/icons/black-firefox-icon.png" alt=""> 
 
    <img class="safari" src="images/icons/black-safari-icon2.png" alt=""> 
 
    </div> \t 
 
</footer>