您好，我正在制作我的网站。我想知道如何将联系人图标放在标题部分的最右侧。 (相对于阅读创意思维的标题文本。我该怎么做？下面是我的代码。请帮忙。谢谢。
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;
}
最佳答案
例如你可以使用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;
}
关于javascript - 如何将图标放在最右侧的标题中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19127794/