Question

我是这个领域的初学者。我希望徽标（使用的图像）出现在条带本身上但是当我使用这个代码时它出现在条带下面。基本上，我想要一个背景颜色为黑色和标题/的条带标题位于中心，在该彩色条的最右角有一个标识。这是我的代码： -

<html>
<head>
    <title>MIT PULSE-Home</title>
    <style>
        .topbar{
         
            color:white;
            background-color:black;
            height:125px;
            width=100%;
            text-align: cente
            border-bottom:solid 2px red;
            
        }
        #Shift{
            margin-top:10px;
            font-size:100px;
        }
       
        body{
            margin:0;
            padding:0;
        }
    
    
    </style>
    
</head>
<body>
      <div class="topbar">
          <p align="center" style="font-size:100px">MIT Pulse</p>
          <img  src="logo.jpg" align="right" height="75">
        
     </div>
</body>
</html>

Answer 1

你正在寻找这样的东西吗？我更正了您的CSS代码中的一些错误，将position: relative;添加到您的班级.topbar并创建了一个新的类.logo，我将其添加到<img> - 标记。

另外，请记住来自ThisGuyHasTwoThumbs的评论，您不应该使用内联CSS

有关相对/绝对定位的进一步阅读，我建议使用MDN文章：https://developer.mozilla.org/en-US/docs/Web/CSS/position

<html>
<head>
    <title>MIT PULSE-Home</title>
    <style>
        .topbar{
         
            color:white;
            background-color:black;
            height:125px;
            width: 100%;
            text-align: center;
            border-bottom:solid 2px red;

            /* Position the element relative */
            position: relative;
            
        }
        #Shift{
            margin-top:10px;
            font-size:100px;
        }

        .logo {
           /* Absolute position for this element */
           position: absolute;

           /* Distance from the right side */
           right: 0;

           /* Center image vertically */
           top: 50%;
           transform: translateY(-50%);
        }
       
        body{
            margin:0;
            padding:0;
        }
    
    
    </style>
    
</head>
<body>
      <div class="topbar">
          <p align="center" style="font-size:100px">MIT Pulse</p>
          <img class="logo" src="http://via.placeholder.com/75x75" align="right" height="75">
        
     </div>
</body>
</html>

Answer 2

徽标出现在标题下方，因为<p>是一个块级元素 - 也就是说，它会强制下一个元素出现在下一行。

通过将标题设为span并显示inline-block，您可以获得类似此代码段的内容。（与其他回复一样，我修复了一些拼写错误并删除了未使用过的CSS。另外，我还是关于内联CSS的评论。）

编辑：更多关于布局＆amp;阻止与此内联MDN tutorial

＆＃13;

    <html>
    <head>
        <title>MIT PULSE-Home</title>
        <style>
            .topbar{
             
                color:white;
                background-color:black;
                height:125px;
                width:100%;
                text-align: center;
                border-bottom:solid 2px red;
                
            }
    
            .right {
                float: right;
            }
    
            .title {
                font-size: 100px;
                display:inline-block;
                margin: 0 auto;
            }
           
            body{
                margin:0;
                padding:0;
            }
        
        
        </style>
        
    </head>
    <body>
          <div class="topbar">
              <span class="title">MIT Pulse</span>
              <img  src="logo.jpg" class="right" height="75" >
            
         </div>
    </body>
    </html>

＆＃13;

徽标应显示在条带

2 个答案: