Question

您好我正在我的网站上工作。我想知道如何在最右边的标题部分放置联系人图标。（相对于读取创意头脑的标题文本。我该怎么做？下面是我的代码。请帮助。谢谢。

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:jonathan@gmail.com?"><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;
}

Answer 1

您可以使用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

Answer 2

你可以使用position：relative;然后使用top，left，right和bottom属性定位图标。

Answer 3

尝试为您的图标添加唯一的类名：

 #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/

如何在最右边的标题中放置图标？

3 个答案: