如何將標題中的圖標放在最右側？

你好我正在我的網站上工作。我想知道如何將聯繫人圖標放在最右邊的標題部分。（相對於讀取創意思維的頭。我如何做到這一點的文字呢？下面是我的代碼。請幫助。謝謝。如何將標題中的圖標放在最右側？

HTML

<body> 
    <div class="auto-style1"> 
    <div id="header"> 
     Header 
     <h1>Creative Mind</h1> 
    </div> 
    <div id="nav"> 
     Navigation 
     <ul> 
     <li><a href="homepage.html">Homepage</a></li> 
     <li><a href="tipsandtricks.html">Tips and Tricks</a></li> 
     <li><a href="aboutme.html">About me</a></li> 
     <li><a href="getintouch.html">Get in Touch</a></li> 
     </ul> 
    </div> 
    <div id="main">Main</div> 
    <h3>Contact Information</h3> 
    <h3>Phone</h3> 
    <p>1-323</p> 
    <h3>Email</h3> 
    <a href="mailto:[email protected]?"><img src=/>gmail</a> 
    <h3>Social Networks</h3> 
    <a href="https://www.facebook.com/mourning.9"><img src=/></a> 
    <div id="footer"> 
     Footer 
     <h3>Creative Mind Jonathan Mourning</h3> 
    </div> 
</body>

CSS

@charset "utf-8"; 
    /* CSS Document */ 
body { 
    background-color: #A6FFFF; 
    width: 100%; 
} 

#header, 
    #main, 
    #footer { 
    display: block; 
    position: relative; 
    float: left; 
} 

#header, 
    #footer { 
    height: 15%; 
    width: 100%; 
} 

#header { 
    margin-bottom: 2px; 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
} 

#footer { 
    margin-top: 2px; 
    text-align: right; 
    border: 2px; 
} 

#main { 
    position: relative; 
    width: 70%; 
    height: 100%; 
    margin: 0 auto; 
    background-color: #FFF; 
    float: center; 
    text-align: center; 
} 

#nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#nav li { 
    display: inline; 
} 

#nav a { 
    display: inline-block; 
    padding: 10px; 
}

來源

2013-10-01 JonMo

要相對於實際的文本或文檔遠嗎？這對我來說並不是很清楚。 –

對不起。相對於閱讀創造性思維的文本而言的最右側。 – JonMo

就在這裏：

?? –

例如，您可以使用float: right

HTML：

<div id="header">Header 
    <a href="/contact" class="contact"><img src="http://lorempixel.com/100/50"></a> 
    <h1>Creative Mind</h1> 
</div>

CSS：

.contact { 
    float: right; 
}

JSFiddle

來源

2013-10-01 23:51:42

可以使用的位置是：相對的;然後定位帶有頂部，左側，右側和底部屬性的圖標。

來源

2013-10-02 01:10:36

嘗試增加獨特的類名你的圖標：

#header{ 
    position:relative; //makes relative to browser 
    } 

    #header .myIcon { 
    position:absolute; // makes to position to right corner of header 
    right:0px; 
    float:right; 
    }

小提琴：http://jsfiddle.net/WLR5S/7/

來源

2013-10-02 04:40:32 ram

如何將標題中的圖標放在最右側？

Creative Mind

回答

相關問題