Question

我有一个h3{}属性，我希望将其拉伸到父div的完整大小。有没有办法做到这一点？

e.g 我所看到的：

|Hello World........|

我想要的是什么：

|H e l l o  W o r l d|

最好不要手动输入。到目前为止我所拥有的：

<!DOCTYPE HTML>
<html>
    <head>
        <title>This site is under development</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script>
            var txt;
            var setopague;
            function home()
            {
                document.getElementById("opaque").style.display = "none";
                document.getElementById('blog').innerHTML = "";
                document.getElementById("imgClick").src = "Home.png";
            }
            function about()
            {
                var header = ["A","B","O","U","T","  ","U","S"];
                txt = "Some Text";
                document.getElementById("opaque").style.display = "block";
                var spacing = "";
                for (i = 0; i < header.length; i++)
                {
                    spacing = spacing + header[i] + "  ";
                }
                document.getElementById('blog').innerHTML = "<h3>" + spacing +"</h3>" + txt;

            }
            function service()
            {
                var header = ["S","E","R","V","I","C","E","S"];
                txt = "Some Text";
                document.getElementById("opaque").style.display = "block";
                document.getElementById('blog').innerHTML = txt;
                var spacing = "";
                for (i = 0; i < header.length; i++)
                {
                    spacing = spacing + header[i] + "  ";
                }
                document.getElementById('blog').innerHTML = "<h3>" + spacing +"</h3>" + txt;

            }
            function news()
            {
                var header = ["N","E","W","  ","T","A","L","E","N","T"];
                txt = "SomeText";
                document.getElementById("opaque").style.display = "block";
                document.getElementById('blog').innerHTML = txt;
                var spacing = "";
                for (i = 0; i < header.length; i++)
                {
                    spacing = spacing + header[i] + "  ";
                }
                document.getElementById('blog').innerHTML = "<h3>" + spacing +"</h3>" + txt;

            }
        </script>
    </head>
    <body>
    <div id="body">
        <img border="0" src="Home.png" name="photo" id="imgClick" usemap="#linkmap" >
        <map name="linkmap">
            <area shape="rect" coords="0,0,250,115" href="javascript:home()">
            <area shape="rect" coords="0,525,333,585" href="javascript:about()">
            <area shape="rect" coords="333,525,666,585" href="javascript:service()">
            <area shape="rect" coords="666,525,1077,585" href="javascript:news()">
        </map> 
        <div id="opaque">
            <div id="blog">
            </div>
        </div>

    </div>
    </body>
</html>

CSS

body {
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: top center;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute; 
}

#blog {
    position: relative;
    left: 650px; 
    width: 400px;
    top: 25px;
    text-align: justify;
}
#opaque {
    display: none;
    position: relative;
    top: 150px;
    left: 0px;
    width: 1077px;
    height: 375px;
    background-color: rgba(255,0,0,0.07);   
}

#body {
    width: 1077px ;
    margin-left: auto ;
    margin-right: auto ;
}
h3 {
    padding: 0px;
    margin: 0px;
    text-align: justify;
}

如何将文本拉伸到div的最大宽度？

0 个答案: