个人中心
gpt4 book ai didi

html - H1 不会使用所有可用空间，即使它和它的容器都有更大的宽度 (HTML/CSS)

转载 作者：行者123 更新时间：2023-11-28 15:10:45 33 4
gpt4 key购买 nike

我有一个 H1，它放置在宽度为 800 像素的 .container div 中。我也试着给 H1 一个宽度，但也没有解决它。我想不出为什么这个 H1 不占用整个宽度的任何原因(将其从 .container div 中取出使其工作)。知道是什么原因造成的吗？

提前致谢。

enter image description here

HTML:

<html>

<head>
<link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="container" id="header-block">
        <h2>Cristian M.</h2>
        <h3>Product Designer</h3>
        <p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>

        <div id="extra-info">
            <p>
                <a href="#">Resume</a> <span id="slash">&#160&#160&#160/&#160&#160&#160</span>
                <a href="#">My Process</a> <span id="slash">&#160&#160&#160/&#160&#160&#160</span> 
                <a href="#">Contact</a>
            </p>
            <p>I live in London, UK</p>
        </div>
    </div>


    <div id="glofox-block">
        <div class="container">
            <img src="Images/macbook.png">
            <div id="text">
                <h1 id="number">01.</h1>
                <h1>Reinventing Glofox's interface for a complex user base.</h1>
                <div id="view-project">
                    <a href="#">View Project</a>
                    <img src="Images/arrow-white.png">
                </div>
            </div>
        </div>
    </div>

    <div id="webfaction-block">
            <div class="container">
                <div id="text">
                    <h1 id="number">02.</h1>
                    <h1>Helping Webfaction attract a less technical audience.</h1>
                    <div id="view-project">
                        <a href="#">View Project</a>
                        <img src="Images/arrow-black.png">
                    </div>
                </div>
                <img id="ipad" src="Images/ipad.jpg">
            </div>
        </div>


</body>

</html>

CSS:

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
@font-face{
    font-family:"Tisa W01 Light";
    src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
    src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
@font-face{
    font-family:"Tisa W01 Regular";
    src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
    src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}

@font-face{
    font-family:"Tisa W01 Medium";
    src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
    src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}

@font-face{
    font-family:"Tisa W01 Bold";
    src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
    src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}




/* Global */

body, a {
    font-family:"Tisa W01 Light", serif;
    color: black;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    border-bottom: 1px solid black;
    cursor: pointer;
}

p {
    font-size: 19px; 
    line-height: 1.8;
}

h1{
    font-size: 50px;
    line-height: 1.2;
    margin: 0 0 40px 0;
    padding: 0;
}

h2{
    font-size: 30px;
    margin: 0;
    padding: 0;
}

h3{
    font-family: "Tisa W01 Medium", serif;
    font-size: 26px;
    margin: -5px 0 40px 0;
    padding: 0;
}

.container{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#view-project{
    display: inline !important;
    opacity: .5 !important;
    border-bottom: 1px solid white;
}

#view-project a{
    font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#view-project img{
    width: 15px !important;
    margin: 0 0 0 5px !important;
    padding: 0 !important;
    float: none !important;
}



/* Intro Section */

#header-block{
    padding: 140px 50px 140px 50px;
}

#extra-info{
    margin-top: 40px !important;
    font-size: 18px;
    opacity: .4;
}

#extra-info p{
    margin: 0;
    padding: 0;
}

#extra-info a{
    font-family: "Tisa W01 Medium", serif;
}


/* Glofox Section */

#glofox-block{
    background-color: #2b4ea4;
    height: 800px;
}

#glofox-block #number{
    opacity: .2;
    font-family: "Tisa W01 Regular", serif;
    margin-bottom: 20px;
}

#glofox-block img{
    z-index: 1;
    width: 740px;
    float: left;
    margin-top: 60px;
}

#glofox-block .container #text{
    position: relative;
    top: -790px;
    z-index: 2;
    float: right;
    width: 350px;
    color: white;
    float: right;
}

#glofox-block #view-project a{
    color: white;
    border: none;
}


/* Webfaction Section */

#webfaction-block #ipad{
    z-index: 1;
    width: 795px;
    position: relative;
    top: -100px;
}

#webfaction-block h1{
    width: 750px;
}

#webfaction-block #text{
    z-index: 2;
}

最佳答案

为了解决这个问题，您需要在 CSS 中添加以下行:

white-space: nowrap;

请熟悉 CSS 空格参数。 https://www.w3schools.com/cssref/pr_text_white-space.asp

关于html - H1 不会使用所有可用空间，即使它和它的容器都有更大的宽度 (HTML/CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51349669/

33 4 0
文章推荐： javascript - Three.js 中的环境光遮挡没有获得更好的结果
文章推荐： html - fieldset 的底部边框覆盖内容
文章推荐： javascript - Django - Javascript - Csrf token
文章推荐： javascript - 如何迭代 JSON 列表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com