发表新帖
发表新帖

Logo image and H1 heading on the same line

前端 未结
关注
13 2039
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-07 19:45

I want to create my first web page but I encountered a problem.

I have the following code:

\"logo\"
相关标签:
13条回答
  • 醉酒成梦
    2020-12-07 20:26

    You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.

    Fiddle

    0 讨论(0)
  • 青春惊慌失措
    2020-12-07 20:26

    This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.

    whois.css

    .header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

    whois.html

    <!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

    output:

    0 讨论(0)
  • 心在旅途
    2020-12-07 20:30

    Check this. 

     .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}
    0 讨论(0)
  • 心在旅途
    2020-12-07 20:32

    Steps:

    1. Surround both the elements with a container div.
    2. Add overflow:auto to container div.
    3. Add float:left to the first element.
    4. Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).
    0 讨论(0)
  • 逝去的感伤
    2020-12-07 20:33

    I'd use bootstrap and set the html as:

    <div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>
    0 讨论(0)
  • 不要未来只要你来
    2020-12-07 20:35

    Try this:

    1. Put both elements in a container DIV.
    2. Give that container the property overflow:auto
    3. Float both elements to the left using float:left
    4. Give the H1 a width so that it doesn't take up the full width of it's parent container.
    0 讨论(0)
 看不清?
提交回复
热议问题