css 如何从左到右对齐图标？

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

:root{
    --color-primary:#191d2b;
    --color-secondary:#27AE60;
    --COLOR-WHITE:#FFFFFF;
    --COLOR-GREY0:#f8f8f8;
    --color-grey1:#dbe1e8;
    --color-grey2:#b2becd;
    --color-grey3:#6c7983;
    --color-grey4:#454e56;
    --color-grey5:#2a2e35;
    --color-grey6:#12181d;
    --br-sm-2:14px;

}

body{
    background-color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--COLOR-WHITE);
    transition: all.4s ease-in-out;
}

a{
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
}

header{
    height: 100vh;
    color: var(--COLOR-WHITE);
    overflow: hidden;
}
section{
    min-height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3rem 18rem;

}

.section{
    transform: translateY(-100%) scale(0);
    transition: all.4s ease-in-out;
    background-color: var(--color-primary);
}

.sec1{
    display: none;
    transform: translateY(0) scale(1);
}
.sec2{
    display: none;
    transform: translateY(0) scale(1);
}
.sec3{
    display: none;
    transform: translateY(0) scale(1);
}
.sec4{
    display: none;
    transform: translateY(0) scale(1);
}
.sec5{
    display: none;
    transform: translateY(0) scale(1);
}

//controls
.controlls{
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 3%;
    float: left;
}

<!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>MY PORTFOLIO</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital@0;1&display=swap" rel="stylesheet">
</head>
<body class="main content">
    <header class="section sec1 header active">
        

    </header>
    <main>
        <section class="section sec2 about"></section>
        <section class="section sec3 portfolio"></section>
        <section class="section sec4 blogs"></section>
        <section class="section sec5 contact"></section>
    </main>

    <div class="controlls">
        <div class="control control-1 active-btn">
            <i class="fa-solid fa-house"></i>
        </div>

        <div class="control control-2 " data-id="about">
            <i class="fa-solid fa-address-card"></i>
        </div>
        <div class="control control-3 " data-id="portfolio">
            <i class="fa-solid fa-briefcase"></i>
        </div>

        <div class="control control-4 " data-id="blogs">
            <i class="fa-solid fa-newspaper"></i>
        </div>

        <div class="control control-5 " data-id="contact">
            <i class="fa-solid fa-address-book"></i>
        </div>
    </div>
</body>
</html>

你好，请我是新的编程，我试图将图标按钮从左到右，我已经做了教程中显示的一切enter image description here .这一直是我的延迟几个星期，我真的需要一个导师，以帮助我快速学习这一点.所有我有在线教程.....
我期待着图标按钮在左侧对齐为真实的的这已经是我的延迟了几个星期

欢迎来到编程的世界！我有点不确定你到底想要什么，但我假设你希望你的图标水平内联而不是垂直显示。要做到这一点，我建议修改你的controlls CSS类如下所示：

.controlls {
  z-index: 10;
  display: flex;    /* This will display them horizontally inline */
  column-gap: 2rem; /* This is a small gap between each item */
}

我现在也删除了定位代码，但是如果你想让它以某种方式定位，你可以在以后再添加它。我还在图标之间添加了一个2 rem的小间隙（如果你不想的话，这是不必要的）。主要的变化是将display属性设置为flex，这将使它们符合你的要求。
欢迎在codesandbox这一行查看更改。希望这对您有帮助！

如果您对其他选项感兴趣，还可以阅读有关CSS Display的更多内容。
既然你说你是编程新手，我也建议你阅读CSS Flexbox，因为它非常有用！

css 如何从左到右对齐图标？

1条答案

相关问题

热门标签

最新问答