Left-align header 到 <ul> 的右边界

Question

我正在编写一个 flask 应用程序，运行遇到了一些问题...正如您从这张图片中看到的那样：

我有一个轻微的偏移 header (Python Explorer v0.0.1) 并且想要使偏移与灰名单的右边界对齐，这样看起来喜欢：

我会这样保留它，但是列表的长度是可变的（flask 在呈现页面之前生成列表中的内容）长度，所以我不确定如何构建 css.这是 jinja2 模板：

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <title>Python-Explorer</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pyexp.css') }}">
    </head>

    <body>
        <div class="header">
            <h1 id="header_name">Python Explorer v{{ peversion }}</h1>
        </div>
        <div class="python_list">
            <ul>
            {%- for ver in versions %}
                <li><a href="#" class="glow">{{ ver }}</a></li>
            {%- endfor %}
            </ul>
        </div>
    </body>
</html>

和 css:

html, body {
    margin: 0;
    padding: 0;
}

.header {
    height: 40px;
    background: black;
}

#header_name {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 150px;
    color: white;
}

.python_list ul {
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 15px;
    border: solid gray 1px;
    display: inline-block;
    background: gray;
}

.python_list ul li {
    padding: 3px;
}


a.glow, a.glow:hover, a.glow:focus {
    text-decoration: none;
    color: black;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
}

a.glow:hover, a.glow:focus
{
    color: white;
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

Answer 1

根据通过 IRC 提供的其他详细信息，我已经做到 python_list 不使用具有百分比宽度或固定宽度的传统侧边栏。这支笔可以满足你的需要。

我做的主要事情是将 header_name 和 python_list 移到同一个 div 中。然后我添加了一个等同于 header 栏高度的填充，它距离 python_list 顶部 40px。这允许列表下拉到栏下方，但仍保持其宽度以间隔 "Python Explorer" 标题字符串。除此之外， display: inline-block 用于并排对齐这两个 div。

希望对您有所帮助！

HTML:
<!DOCTYPE html>
<html lang="en-us">
    <head>
        <title>Python-Explorer</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pyexp.css') }}">
    </head>

    <body>
        <div class="header">
            <div class="python_list">
                <ul>
                    {%- for ver in versions %}
                        <li><a href="#" class="glow">{{ ver }}</a></li>
                    {%- endfor %}
                </ul>
                <div id="header_name">
                    <h1>Python Explorer v{{ peversion }}</h1>
                </div>
            </div>
        </div>
    </body>
</html>

CSS:
html, body {
margin: 0;
padding: 0;
}

.header {
position: relative;
height: 40px;
background: black;
}

#header_name {
display: inline-block;
color: white;
}
#header_name h1 {
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
.python_list {
display: inline-block;
padding-top: 40px;
}
.python_list ul {
text-align: left;
list-style: none;
margin: 0;
padding: 15px;
border: solid gray 1px;
display: inline-block;
background: gray;
}

.python_list ul li {
padding: 3px;
}


a.glow, a.glow:hover, a.glow:focus {
text-decoration: none;
color: black;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

a.glow:hover, a.glow:focus
{
color: white;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}

See the demo here

Left-align header 到 <ul> 的右边界

Left-align header to right border of <ul>

html

css

frontend

jinja2

flask