如何让标题栏在CSS中占据预期的空间？

wgmfuz8q 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(97)

**您好！**我的标题栏没有占用预期的空间。下面是一个图表：Diagram of my problem我用红色突出显示的区域是我想要标题栏的位置（在现有按钮旁边），但我的标题栏却移动到了下一行。代码如下：

body, html{
    margin: 0px;
    height: 100%;
}
div.titlebar{
    background-color: rgb(226, 147, 0);
    color: white;
    padding: 5px;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
    display: inline-block;
    cursor: default;
}
div.titlebutton{
    cursor: pointer;
    margin-left: 2px;
    background-color: orange;
    color: white;
    padding: 5px;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
    display: inline-block;
}
div.titlebutton:hover{
    background-color: rgb(226, 147, 0);
}
#editor{
    border: none;
    resize: none;
    font-size: 20px;
    width: 100%;
    height: calc(100% - 45px);
    box-sizing: border-box;
}
div#rest {
    background-color: orange;
    color: white;
    margin-left: 2px;
    padding: 5px;
    height:30px;
    display: inline-block;
    cursor: default;
    width: 100%;
}

个字符

尝试修复

（请记住，我是一个CSS初学者）我试着使用width:100%;沿着display:inline-block;，使它去旁边的按钮。我不熟悉其他的方法，所以这是除了display:inline;之外我唯一尝试的方法，最终打破了整个酒吧。

css

来源：https://stackoverflow.com/questions/76855037/how-do-i-make-my-title-bar-take-up-the-intended-space-in-css

2条答案

按热度按时间

rkue9o1l1#

由于没有包含标题栏的 Package 器元素，这对您来说相当困难。你想要的布局是非常灵活的，所以你自然会想要一个标题栏内的项目的flexbox父级：

body, html{
    margin: 0px;
    height: 100%;
}
div.titlebar-wrapper {
    display: flex;
    background-color: rgb(226, 147, 0);
}
div.titlebar{
    color: white;
    padding: 5px;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
    display: inline-block;
    cursor: default;
}
div.titlebutton{
    cursor: pointer;
    margin-left: 2px;
    background-color: orange;
    color: white;
    padding: 5px;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
    display: inline-block;
}
div.titlebutton:hover{
    background-color: rgb(226, 147, 0);
}
#editor{
    border: none;
    resize: none;
    font-size: 20px;
    width: 100%;
    height: calc(100% - 45px);
    box-sizing: border-box;
}

个字符
这也允许你摆脱<div id="rest">，只需给父级适当的background-color。

编辑

这里有一个保留页边空白的例子，它将background-color放在flex子元素上（实际上已经有了），并将#rest的宽度更改为flex: 1，以填充剩余的空间（替换width: 100%）。

body, html{
    margin: 0px;
    height: 100%;
}
div.titlebar-wrapper {
    display: flex;
}
div.titlebar{
    color: white;
    padding: 5px;
    background-color: rgb(226, 147, 0);
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
    display: inline-block;
    cursor: default;
}
div.titlebutton{
    cursor: pointer;
    margin-left: 2px;
    background-color: orange;
    color: white;
    padding: 5px;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
    display: inline-block;
}
div.titlebutton:hover{
    background-color: rgb(226, 147, 0);
}
#editor{
    border: none;
    resize: none;
    font-size: 20px;
    width: 100%;
    height: calc(100% - 45px);
    box-sizing: border-box;
}

div#rest {
    background-color: orange;
    color: white;
    margin-left: 2px;
    padding: 5px;
    height:30px;
    display: inline-block;
    cursor: default;
    flex: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Editor</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
    <div class="titlebar-wrapper">
      <div class="titlebar">Text Editor</div><div class="titlebutton" id="save">Save</div><div class="titlebutton" id="load">Load</div><div id="rest"></div>
    </div>
    <br/>
    <textarea id="editor"></textarea>
    <script src="text.js"></script>
</body>
</html>

的字符串

赞(0）回复(0）举报 2023-08-08

hc2pp10m2#

如果你把它 Package 在一个块格式的容器中，并把按钮放在inline-block中，它应该作为一个基点。然后，你可以在容器div上进行文本对齐，使其左或右，所有的按钮应该彼此相邻对齐。从那里，您可以应用任何其他样式，你想它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .titlebutton{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="titlebar">Text Editor<div class="titlebutton" id="save">Save</div><div class="titlebutton" id="load">Load</div><div id="rest"></div></div>
</body>
</html>

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

如何让标题栏在CSS中占据预期的空间？

尝试修复

2条答案

编辑

相关问题

热门标签

最新问答