Question

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

我有一个稍微偏移的标题（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中。然后我添加了一个相当于标题栏高度的填充，它是40px到python_list的顶部。这允许列表下拉到栏下方但仍保持其宽度以隔开“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

左对齐标题到<ul>的右边框

1 个答案: