文章/答案/技术大牛

发布

社区首页 >问答首页 >定位元素时出现问题。使用CSS

问定位元素时出现问题。使用CSS
EN

Stack Overflow用户

提问于 2020-04-10 11:24:16

回答 1查看 74关注 0票数 0

我已经尝试学习HTMl和CSS有一段时间了，我已经知道了一些基础知识，但很长一段时间以来，我一直在努力将项目定位在我想要的位置。

我已经遵循了许多教程，如果我完全按照他们做的那样做，一切都很完美，但当我开始尝试让事情变得更复杂时，事情并不像我期望的那样。

例如，请查看此图像。我有带元素的行，第一行我可以用每个项目覆盖屏幕的50%，并用一个浮动将它们放在中间对齐，但当我将宽度改为40%而不是50%时，它们失去了中心对齐，更奇怪的是，它们向下移动了几个像素，并与项目下方的分隔松散。我不明白为什么改变宽度会影响它的垂直位置。

有了第二行的元素，我将它们定位为绝对的，我不知道如何将它们放在屏幕的中间。

至于第四行，米色和绿色的方框，我不明白为什么米色方框的文本在方框的底部，部分文本在方框之外，而所有其他行的文本则自动垂直于方框的中心对齐。

下面是我的代码：

       body {
                margin: auto;
                max-width: 4000px;
                height: 5000px;
                font-family: "Lato";
            }
            #text-1{
                background-color: black;
                color: white;
                width: 50%;
                padding: 20px, 50px;
                float: left;
                text-align: center;
                text-justify: auto;
            }
            
            #text-1:hover{
                background-color: white;
                color: black;
            }
            
            #text-2 {
                background-color: lightgray;
                color: black;
                width: 50%;
                padding: 20px, 50px;
                float: left;
                text-align: center;
                text-justify: auto;
            }
            
            #text-2:hover {
                background-color: white;
                color: black;
            }
            
             #text-3{
                background-color: black;
                color: white;
                width: 500px;
                
                padding: 0px, 50px;
                position: absolute;
                left:200px;
                top: 100px;
                text-align: center;
                
            }
            
            #text-3:hover{
                background-color: white;
                color: black;
            }
            
            #text-4 {              
                background-color: lightgray;
                color: black;
                width: 500px;
                padding: 0px, 50px;
                position: absolute;
                left: 700px;
                top: 100px;
                text-align: center;
                
            }
            
            #text-4:hover {
                background-color: white;
                color: black;
            }
            
            #text-5 {              
                background-color: lightpink;
                color: black;
                width: 100%;
                padding: 0px, 50px;
                position: fixed;
                top: 200px;
                text-align: center;
                
            }
            
            #text-5:hover {
                background-color: white;
                color: black;
            }
        
            a:link{
                text-decoration: none;
                color: inherit;
            }
            
            a:visited{
                text-decoration: none;
                color: inherit;
                
            }
            
            .box-1 {
                background-color: beige;
                color: black;
                width: 500px;
                height: 100px;
                position: relative;
                left: 100px;
                top:300px;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                padding-left: 20px;
                padding-right: 20px;
                z-index: 1;
            }
            
            .box-2 {
                background-color: lightgreen;
                color: black;
                width: 200px;
                height: 100px;
                position: relative;
                left: 300px;
                top: 250px;
                padding: 20px, 20px,20px, 20px;
                text-align: center;
                border-style: solid;
                border-width: 1px;
                z-index: 0;
            }

    <html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>

        
        
        
    </head>
    
   
    <body>
        <div id="text-1">
            <a href="index.html" target="_blank">
                <p>Experimenting with one paragraph</p>
                <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
            </a>
        </div>
        
        <div id="text-2">
            <a href="index.html" target="_blank">
                <p>Another chunck of text</p>
                <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
            </a>    
        </div>
    
        <div id="text-3">
            <a href="index.html" target="_blank">
                <p>Button 3</p>
                <p>This button has an absolute posittion, so it doesn't float around.</p>
            </a>
        </div>
        
        <div id="text-4">
            <a href="index.html" target="_blank">
                <p>Button 4</p>
                <p>This button has an absolute posittion, so it doesn't float around.</p>
            </a>    
        </div>
        
        <div id="text-5">
            <a href="index.html" target="_blank">
                <p>Button 4</p>
                <p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
            </a>    
        </div>
    
        <div class="box-1">
                <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
        </div>
        
        <div class="box-2"></div>
                      
    </body>
</html>

css

css-position

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-10 13:53:04

你想要这样吗？

body {
    margin: auto;
    max-width: 4000px;
    height: 5000px;
    font-family: "Lato";
}
#text-1{
    background-color: black;
    color: white;
    width: 50%;
    padding: 20px, 50px;
    float: left;
    text-align: center;
    text-justify: auto;
    position: relative;
}

#text-1:hover{
    background-color: white;
    color: black;
}

#text-2 {
    background-color: lightgray;
    color: black;
    width: 50%;
    padding: 20px, 50px;
    float: left;
    text-align: center;
    text-justify: auto;
    position: relative;
}

#text-2:hover {
    background-color: white;
    color: black;
}

 #text-3{
    background-color: black;
    color: white;
    width: 40%;
    padding: 0px, 50px;
    position: absolute;
    left:10%;
    top: 110px;
    text-align: center;

}

#text-3:hover{
    background-color: white;
    color: black;
}

#text-4 {              
    background-color: lightgray;
    color: black;
    width: 40%;
    padding: 0px, 50px;
    position: absolute;
    left: 50%;
    top: 110px;
    text-align: center;

}

#text-4:hover {
    background-color: white;
    color: black;
}

#text-5 {              
    background-color: lightpink;
    color: black;
    width: 100%;
    padding: 0px, 50px;
    position: fixed;
    top: 200px;
    text-align: center;

}

#text-5:hover {
    background-color: white;
    color: black;
}

a:link{
    text-decoration: none;
    color: inherit;
}

a:visited{
    text-decoration: none;
    color: inherit;

}

.box-1 {
    background-color: beige;
    color: black;
    width: 500px;
    height: 100px;
    position: relative;
    left: 100px;
    top:300px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
    margin: 0;
}

.box-2 {
    background-color: lightgreen;
    color: black;
    width: 200px;
    height: 100px;
    position: relative;
    left: 300px;
    top: 250px;
    padding: 20px, 20px,20px, 20px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    z-index: 0;
}
.box-1 > p{
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
    <div id="text-1">
        <a href="index.html" target="_blank">
            <p>Experimenting with one paragraph</p>
            <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
        </a>
    </div>

    <div id="text-2">
        <a href="index.html" target="_blank">
            <p>Another chunck of text</p>
            <p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
        </a>    
    </div>

    <div id="text-3">
        <a href="index.html" target="_blank">
            <p>Button 3</p>
            <p>This button has an absolute posittion, so it doesn't float around.</p>
        </a>
    </div>

    <div id="text-4">
        <a href="index.html" target="_blank">
            <p>Button 4</p>
            <p>This button has an absolute posittion, so it doesn't float around.</p>
        </a>    
    </div>

    <div id="text-5">
        <a href="index.html" target="_blank">
            <p>Button 4</p>
            <p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
        </a>    
    </div>

    <div class="box-1">
        <p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
    </div>
    <div class="box-2"></div>
</html>
</body>
</html>

在第二行中，div通过将#text-4和#text-5的宽度指定为40%，将#text-4的左侧指定为10%，将#text-5的左侧指定为50%，使div居中对齐。通过设置#box-1的绝对位置，#box-1内的p标记在#box-1内对齐

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61133569

复制

相似问题

问定位元素时出现问题。使用CSS
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问定位元素时出现问题。使用CSSEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问定位元素时出现问题。使用CSS
EN