Question

当我调整浏览器窗口大小时，输入字段会被切断一点。我正在使用百分比，但它仍然被切断，我不知道为什么。我在下面提供了一个屏幕截图。如果我使用百分比不应该自动调整大小？谢谢！

这是我的css代码：

body {
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
    font-family: sans-serif;
}

.homepage-window {
    height: 100vh;
    display: flex;
}

.nav-bar {
    width: 18%;
    background-color: #2E3E4E;
}

.bar-manager {
    width: 100%;
}

.top-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 7%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}

.top-bar p {
    margin-left: 10px;
    font-weight: lighter;
}

.user-search-input-field {
    margin-left: 70%;
    width: 190px;
    background-color: red;
}

.bottom-bar {
    width: 100%;
    height: 40px;
    display: flex;
    align-content: center;
    line-height: 40%;
    background-color: white;
    border-bottom: 1px solid lightgrey;
}

.bottom-bar h1 {
    font-size: 12px;
    margin-left: 10px;
    font-weight: 500;
}

.bottom-bar p {
    font-size: 12px;
    margin-left: 10px;
    font-weight: lighter;
}

这是我的HTML代码：

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
    <title>Cold-Ops Homepage</title>
</head>
<body>
    <div class="homepage-window">
        <div class="nav-bar">   
        </div>
        <div class="bar-manager">
            <div class="top-bar">
                <p>Homepage</p>
                <div class="user-search-input-field">
                    <form action="Login.php" method="POST">
                        <input type="text" name="userPost" placeholder="Search users..." required>
                        <i class = "fa fa-search" aria-hidden = "true"></i>
                    </form>
                </div>
            </div>
            <div class="bottom-bar">
                <div class="bottom-bar-texts">
                    <div><h1>Welcome, Omard2000</h1></div>
                    <div><p>Administrator</p></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

谢谢！

Answer 1

您已定位元素。

左边可能会将其推离可见屏幕

此外，混合视图单元和像素是危险的。

Answer 2

更新帖子：

因为这user-search-input-field空间不足。 top-bar分为两部分，p的part1和user-search-input-field的part2，空格更多。像这样：

body {
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
    font-family: sans-serif;
}

.homepage-window {
    height: 100vh;
    display: flex;
}

.nav-bar {
    width: 18%;
    background-color: #2E3E4E;
}

.bar-manager {
    width: 100%;
}

.top-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 7%;
    background-color: white;
    border-bottom: 0.5px solid lightgrey;
}

.top-bar p {
    margin-left: 10px;
    font-weight: lighter;
}


.bottom-bar {
    width: 100%;
    height: 40px;
    display: flex;
    align-content: center;
    line-height: 40%;
    background-color: white;
    border-bottom: 1px solid lightgrey;
}

.bottom-bar h1 {
    font-size: 12px;
    margin-left: 10px;
    font-weight: 500;
}

.bottom-bar p {
    font-size: 12px;
    margin-left: 10px;
    font-weight: lighter;
}

.user-search-input-field {
    width: 100%;
    
}

form {
    background-color: red;
    display: inline-block;
    float: right;
}

.top-bar p {
    width: 20%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="homepage-window">
    <div class="nav-bar"></div>
    <div class="bar-manager">
        <div class="top-bar">
            <p>Homepage</p>
            <div class="user-search-input-field">
                <form action="Login.php" method="POST">
                    <input type="text" name="userPost" placeholder="Search users..." required>
                    <i class = "fa fa-search" aria-hidden = "true"></i>
                </form>
            </div>
        </div>
        <div class="bottom-bar">
            <div class="bottom-bar-texts">
                <div><h1>Welcome, Omard2000</h1></div>
                <div><p>Administrator</p></div>
            </div>
        </div>
    </div>
</div>

为什么在调整窗口

2 个答案: