Question

我试图将文字放在同一行上，但我在这方面遇到了麻烦。我想要实现的是屏幕左上角和屏幕右上角的一些文本，显示指向其他URL的链接。这就是我到目前为止所做的：

enter image description here

这就是我想要实现的目标：

enter image description here

任何人都可以提供如何实现这一目标吗？谢谢

以下代码：

<style type="text/css">
@font-face /* support for browsers & IE v10 onwards*/
{font-family:homefont; src: url("font.ttf");}
{font-family:headerfont; src: url("playball.ttf");}
body {background:url('img/mybackgroundHD.jpg') no-repeat center center fixed;}
<!-- Make Header Sticky -->
#header_container {background:#00E5EE; border:0px solid #666; height:70px; left:0; position:fixed; width:100%; top:0;}
<!-- HEADER text -->
#header{padding: 0.3em 0; border-bottom: 0px; overflow: hidden; zoom: 1; line-height:0px; margin:0 auto; width:940px; text-align:left;display:inline-block; float:right;}
#wrapper{width:900px;margin:0 auto;}
a{color:#444;text-decoration: none;}
.logo{margin-left:600px;margin-top:100px;background:#fff;padding:10px;}
.bigtitle{font-family: homefont; font-size:150px; color:#000; text-transform:uppercase; text-shadow:4px 1px 1px #444; text-align:center; margin-top:200px; opacity:0.6;}
.header{top:100%; left:0%; font-family: headerfont; font-size:20px; color:#FFFFFF; font-style:italic; padding-top:0px; padding-bottom:0px; padding-right:20px; padding-left:0px;}
</style>
</head>
<body>

<!-- BEGIN: Sticky Header -->
<div id="header_container">

    <div id="header"><p class="header"> Follow me on:

    <a style="margin:0;" href="https://www.facebook.com/chilunliuTheBOSSE">
    <img src="/img/facebook-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="https://plus.google.com/u/0/+chilunliu/posts/p/pub">
    <img src="/img/googleplus-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="http://www.linkedin.com/pub/chilun-liu/1b/297/416">
    <img src="/img/linkedin-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="">
    <img src="/img/email-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    <a style="margin:0;" href="http://www.youtube.com/user/chilunliu">
    <img src="/img/youtube-lnk.gif" alt="alt text" style="border:none; width="40" height="40"></a>

    </div>
    </p>

</div>
<!-- END: Sticky Header -->

    <div id="wrapper">
      <h2 class="bigtitle">
      <p>
      Chilun Liu
      </p>
      </h2>
     </div>

</body>
</html>

Answer 1

将<div id="header-container">两个div放入其中：

<div id="subheader-left" style="float:left>Follow me on</div>
<div id="subheader-right" style="float:right; text-align:right"> your images here </div>

Answer 2

将文本浮动，然后向右浮动社交图标容器。在图标容器之后，放入一个具有明确的css属性的div：both;

网页 - 标题中的文本定位

2 个答案: