Question

我创建了一个名为Friends的链接/按钮，当我重新调整窗口大小时，它就是我为它制作的框。我试过添加边距和填充，但这对我没有帮助。我所做的每件事仍然让它开箱即用。

body {
    background-color: black;
}

.Forum-Block {
    position: absolute;
    border-radius: 5%;
    left: 10%;
    top: 0%;
    width: 70%;
    height: 140%;
    margin: 5%;
    background-color: #888888;
    border-style: solid;
    border-width: medium;
    border-color: orange;
}
.Top-Bar {
    position: absolute;
    top: 8%;
    left: 5%;
    width: 90%;
    height: 6%;
    background-color: black;    
}
.welcome-msg {
    position: absolute;
    top: 30%;
    left: 2%;
}
.friends-box {
    position: relative;
    top: 0%;
    left: 90%;
    width: 10%;
    height: 100%;
    color: white;
    background-color: black;
}
.friends-box:hover {
    position: absolute;
    top: 0%;
    left: 90%;
    width: 10%;
    height: 100%;
    background-color: #262626;
}

Answer 1

试试这个

.friends-box {
        position: relative;
        top: 0%;
        right:2%;
        width: 15%;
        height: 100%;
        color: white;
        font-size:100%;
    background-color: black;
}
.friends-box:hover {

    background-color: #262626;
}

您也应该使用网格 - 制作.welcome-msg{width:75%;left:0;}和.friend-box{width:25%;right:0}

用标签包装文本，欢迎使用H1，h2或h4，p标签中的朋友也可以添加填充。

希望这有帮助。

Answer 2

我刚刚添加浮动并移除了位置：绝对位置和相对位置...我还将顶栏的高度设置为自动，以便它占据内部的高度。我改变了背景颜色，这样你就可以看到发生了什么。希望这有帮助！

<style type="text/css">
    body {
        background-color: black;
    }
    .Forum-Block {
        position: absolute;
        border-radius: 5%;
        left: 10%;
        top: 0%;
        width: 70%;
        height: 140%;
        margin: 5%;
        background-color: #888888;
        border-style: solid;
        border-width: medium;
        border-color: orange;
    }
    .Top-Bar {
        position: absolute;
        top: 8%;
        left: 5%;
        width: 90%;
        height:auto;
        background-color: black;
    }
    .welcome-msg {
        float:left;
        color: #FFFFFF;
        padding:10px;
      background: red;
    }
    .friends-box {
        float:right;
        color: white;
        background-color: green;
        padding:10px;
    }
    .friends-box:hover {
        background-color: #262626;
    }
    </style>

<div class="Forum-Block">
    <div class="Top-Bar">
        <div class="welcome-msg">Hello, Admin</div>
        <div class="friends-box">Friends</div>
    </div>
</div>

链接/按钮离开了我为它制作的盒子

2 个答案: