Question

我无法在标题的右侧添加一些文字。我在标题的右侧放置了一些小尺寸的图像，并向下放置了一点点，我想在它们上面写一些文字，但我无法写。

我想这样做：

I want to do like this 填充或保证金问题？ padding or margin problem

<body>    
<div class="container">
    <div class="header"><b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
    <a href="#Raas"><img src="img/Raas.png" class="logo"></img></a>
    <a href="#insta"><img src="img/insta.png" class="social"></img></a>
    <a href="#tw"><img src="img/twitter.png" class="social"></img></a>
    <a href="#fb"><img src="img/facebook.png" class="social"></img></a>
</div>

.css来源

.social {
 float: right;
 width: 50px;
 height: 25px;
 margin-left: 10px;
 margin-top: 75px;
 text-decoration: none;
}

请帮助我。

Answer 1

 .header > B
 {
    text-align: right;
    font-size: 20px;
 }
 .social {
    position: absolute; 
    right:0;
    top: 0;
    text-align: right;
    }

<div class="container">
        <div class="header">
          <a href="#Raas"><img src="img/Raas.png" class="logo"></img></a>
          <div class="social">
             <b>'RAASHFC' to 56161</b>
             <div>
             <a href="#insta"><img src="img/insta.png"></img></a>
             <a href="#tw"><img src="img/twitter.png"></img></a>
             <a href="#fb"><img src="img/facebook.png"></img></a>
             </div>
           </div>
        </div>
    </div>

希望它有所帮助！

Answer 2

您将图像设置为浮动：右侧，但不是它们的包含元素（锚标记）。尝试将您的“社交”类移动到锚标记中（或者更好的是，将所有这些锚定的元素包含在内并将其添加到锚定标记中）。

Answer 3

我附上了三种代码片段，检查您需要什么

.social {
width: 50px;
height: 25px;
text-decoration: none;
  }

#icons{
float:right;
 }

 <body>
<div class="container">
    <div class="header">
        <a href="#Raas"><img src="img/Raas.png" class="logo"></a>
       <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
       </div>
      <div id="icons">
      <a href="#insta"><img src="img/insta.png" class="social"></a>
      <a href="#tw"><img src="img/twitter.png" class="social"></a>
      <a href="#fb"><img src="img/facebook.png" class="social"></a>
        </div>
  </div>

    .social {
    width: 50px;
    height: 50px;
    text-decoration: none;
      }
    #icons{
         float:right;
     }
#insta,#fb,#twit{
display:inline-block;
}
label{
font-weight:bold;
}

     <body>
    <div class="container">
        <div class="header">
            <a href="#Raas"><img src="img/Raas.png" class="logo"style="float: left"></a>
           <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
           </div>
      <br/>
     
               
      <br/>
      <div id="icons">
          <div id="insta">
               <label>Instagram</label><br/>
                <a href="#insta"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" class="social"></a>
                    </div>
        <div id="fb">
               <label>Facebook</label><br/>
                <a href="#insta"><img src="https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png" class="social"></a>
                    </div>
        <div id="twit">
               <label>Twitter</label><br/>
                <a href="#insta"><img src="http://vignette4.wikia.nocookie.net/simpsons/images/1/11/Twitter_bird_icon.png/revision/latest?cb=20111228065136" class="social"></a>
                    </div>
        </div>
      </div>

.social {
    width: 50px;
    height: 50px;
    text-decoration: none;
      }
    #icons{
         float:right;
      margin-right:30%;
     }
#insta,#fb,#twit{
display:inline-block;
}
label{
font-weight:bold;
}

<body>
    <div class="container">
        <div class="header">
            <a href="#Raas"><img src="img/Raas.png" class="logo"style="float: left"></a>
           <b style="font-size:20px; float: right">'RAASHFC' to 56161</b>
           </div>
      <br/>
     
               
      <br/>
      <div id="icons">
          <div id="insta">
               <label>Instagram</label><br/>
                <a href="#insta"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" class="social"></a>
                    </div>
        <div id="fb">
               <label>Facebook</label><br/>
                <a href="#insta"><img src="https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png" class="social"></a>
                    </div>
        <div id="twit">
               <label>Twitter</label><br/>
                <a href="#insta"><img src="http://vignette4.wikia.nocookie.net/simpsons/images/1/11/Twitter_bird_icon.png/revision/latest?cb=20111228065136" class="social"></a>
                    </div>
        </div>
      </div>

无法在网站标题上添加文字

3 个答案: