网站上按钮正确对齐的问题

问题描述 投票：0回答：1

我已经尝试了一段时间，并在网上寻找如何正确对齐网站的用户界面，但无论我尝试什么都没有成功，它要么将其翻转回垂直布局，要么干扰导航栏。

第一次使用html和css，因此需要学习很多东西。任何反馈/解决方案都会被采纳。

目标：让网站上连续的五个按钮位于屏幕中央，而不是导航栏的右侧。

HTML代码：

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/styles_home.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <title>Medication reminder</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li>
                <a href="{% url 'profile_home' %}"><i class="fas fa-home"></i>Home</a>
            </li>
            <li>
                <a href="{% url 'settings' %}""><i class="fas fa-cog"></i>Settings</a>
            </li>
            <li class="end">
                <form action="{% url 'logout' %}" method="post">
                    {% csrf_token %}
                    <button type="submit"><i class="fas fa-door-open"></i>Logout</button>
                </form>
            </li>
        </ul>
    </div>

    <div class="container">
    <div class="row">
        <ul>
            <li>
                <a href="dashboard.html">
                    <i class="fas fa-border-all"></i> <br>Dashboard
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="fas fa-calendar-alt"></i> <br>Schedule
                </a>
            </li>
            <li>
                <a href="events.html">
                    <i class="fas fa-circle-exclamation"></i> <br>Events
                </a>
            </li>
            <li>
                <a href="analysis.html">
                    <i class="fas fa-chart-line"></i> <br> Analysis
                </a>
            </li>
            <li>
                <a href="configuration.html">
                    <i class="fas fa-sliders"></i> <br>Configuration
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

和CSS代码：

:root {
    --text: #10150f;
    --background: #fafbf9;
    --primary: #799d72;
    --secondary: #aac4b7;
    --accent: #92b3a7;
    --shadow: rgba(125, 125, 125, 0.2)
}
  

body {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    background-color: var(--background);
    margin: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background); /* Adjust background color as needed */
    padding: 20px 20px; /* Adjust padding as needed */
    box-shadow: 0 4px 8px 0 var(--shadow), 0 6px 20px 0 var(--shadow);
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar li {
    margin-left: 20px;
    margin-right: 30px; /* Adjust margin between items as needed */
}

.navbar li.end {
    margin-right: 0; /* No margin for the "end" item */
    margin-left: auto; /* Push the "end" item to the right */
}

.navbar i {
    margin-right: 5px;
}

.navbar button, a {
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text); /* Adjust button text color as needed */
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
}


.navbar button:hover {
    color: #3b5447;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.row ul {
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
    justify-content: center; /* Horizontally center the items */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.row li {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    border-radius: 10px;
}

.row i {
    margin-bottom: 5px;
    height: 20px;
}

.row a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    list-style-type: none;
    height: 200px;
    width: 200px;
    margin: 25px;
    padding: 10px;
    background-color: var(--primary);
    border-radius: 10px;
    color: var(--text);
}

.row a:hover {
    background-color: var(--secondary);
}

网站当前用户界面

尝试将显示从柔性更改为块，但这不起作用，因为之后我无法获得正确的行方向。尝试在html中的行类之前添加一个容器类，然后尝试将其配置为居中，这也不起作用。也尝试了一些小改变，甚至请求 chatgpt 帮忙，但没有成功。

html css
1个回答
0
投票

正如@Brett Donald在他的评论中已经提到的那样，目前还不清楚你首先想要实现什么目标，但我将在这里为你制定一些指导方针。如果您想将按钮垂直居中，则需要以某种方式告诉 

.container
div 占据更多高度，因为然后使用 Flexbox 的 CSS 属性 
align-content: center
为您自动居中内容。

另一件事，也许我误解了代码，但我认为 

.row
div 有点多余，您可以仅使用按钮的第一个父 div 来实现相同的结果，并将样式更改为沿以下几行：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 89vh;
}

.container ul {
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
    justify-content: center; /* Horizontally center the items */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.container li {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    border-radius: 10px;
}

.container i {
    margin-bottom: 5px;
    height: 20px;
}

.container a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    list-style-type: none;
    height: 200px;
    width: 200px;
    margin: 25px;
    padding: 10px;
    background-color: var(--primary);
    border-radius: 10px;
    color: var(--text);
}

.container a:hover {
    background-color: var(--secondary);
}

并从 HTML 中删除 

.row
div：

<div class="container">
    <ul>
        <li>
            <a href="dashboard.html">
                <i class="fas fa-border-all"></i> <br>Dashboard
            </a>
        </li>
        <li>
            <a href="calendar.html">
                <i class="fas fa-calendar-alt"></i> <br>Schedule
            </a>
        </li>
        <li>
            <a href="events.html">
                <i class="fas fa-circle-exclamation"></i> <br>Events
            </a>
        </li>
        <li>
            <a href="analysis.html">
                <i class="fas fa-chart-line"></i> <br> Analysis
            </a>
        </li>
        <li>
            <a href="configuration.html">
                <i class="fas fa-sliders"></i> <br>Configuration
            </a>
        </li>
    </ul>
</div>

在我的例子中，我明确定义了容器 div 的高度，但这通常不是首选解决方案，因为您可能希望您的网站能够响应不同的屏幕比例或尺寸，在这种情况下您可能需要研究css @media 查询。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.