html - img 旁边的两个文本

Question

<div id="title_div">
        <h1 id="title_text">WIFI</h1>
    </div>

    <div id="container_connected_network">
        <h2>connected</h2>
        <div id="connected_network">
            <img id="connected_network_img" src="wifi_icon.png">
            <div id="content_connected_network">
                <h3>Test</h3>
                <h4>click for more</h4>
            </div>
        </div>
    </div>

    <div id="avaiable_networks_container">
        <h2>avaiable</h2>
        <div id="connected_network">
            <img id="connected_network_img" src="wifi_icon.png">
            <div id="content_connected_network">
                <h3>Test</h3>
                <h4>click for more</h4>
            </div>
        </div>
    </div>

<style type="text/css">
        body {
            background-color: #f2f2f2;
        }

        #title_div {
            position: absolute;
            top: 0px; left: 0px;
            width: 800px;

            text-align: center;

            background-color: #5ea77e;
        }
            #title_text {
                color: white;
            }

        #container_connected_network {
            position: absolute;
            top: 90px;
            width: 770px;
            padding-left: 10px;

            border: 3px solid #5ea77e;
        }
            #connected_network_img {
                height: 40px;

                margin-right: 10px;
                float: left;
            }
                #content_connected_network {
                    overflow: auto;
                }

        #avaiable_networks_container {
            position: absolute;
            top: 270px;
            width: 770px;
            padding-left: 10px;

            border: 3px solid #5ea77e;
        }
    </style>

如何<h4>click for more</h4>在 img 旁边获取文本？

我知道如何使用绝对定位来做到这一点，但我认为这是最好的方法。

图片的高度必须为 40 像素。

标签： htmlcss

Answer 1

尝试这个 ：-

div#content_connected_network h4, h3 {
    margin: 0;
} 

输出是： -