Html 如何强制div内容对齐？_Html_Css

Html 如何强制div内容对齐？

html css

Html 如何强制div内容对齐？,html,css,Html,Css,我正在建立一个网页，我正在导航栏上工作。到目前为止，一切（大部分）都进展顺利。由于某些原因，内容没有对齐-右侧似乎有什么东西挡住了它。我如何强制它们对齐？这是我的密码： HTML 我建议你这样做： /*开始变量*/ ：根{ --aa颜色：#57C324； } /*结束变量*/ * { 框大小：边框框；保证金：0；填充：0；字体系列：“源Sans-Pro”，无衬线； } /*启动导航栏*/ .导航栏包装{ 宽度：100%；填充物：2%10%；显示器：flex；证明内容：之间的空间；

我正在建立一个网页，我正在导航栏上工作。到目前为止，一切（大部分）都进展顺利。由于某些原因，内容没有对齐-右侧似乎有什么东西挡住了它。我如何强制它们对齐？这是我的密码：

HTML

我建议你这样做：

/*开始变量*/
：根{
--aa颜色：#57C324；
}
/*结束变量*/
* {
框大小：边框框；
保证金：0；
填充：0；
字体系列：“源Sans-Pro”，无衬线；
}
/*启动导航栏*/
.导航栏包装{
宽度：100%；
填充物：2%10%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
盒影：5px10px 8px#8888888；
}
.左边{
浮动：左；
宽度：50%；
}
.右侧{
浮动：对；
宽度：50%；
}
.选项{
文字装饰：无；
}
林霍姆先生{
字体大小：150%；
文字装饰：无；
颜色：var（--aa颜色）；
右边距：0%；
左缘：2%；
显示：内联块；
}
.linkwork{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
林卡约先生{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
林克社区{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
.linkculture{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
/*结束导航栏*/


亚的斯亚贝巴阿贝巴之家

试试这个

/*开始变量*/
：根{
--aa颜色：#57C324；
}
/*结束变量*/
* {
框大小：边框框；
保证金：0；
填充：0；
字体系列：“源Sans-Pro”，无衬线；
}
/*启动导航栏*/
.导航栏包装{
宽度：100%；
填充物：2%10%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
盒影：5px10px 8px#8888888；
}
.导航栏包装器a{
文字装饰：无；
}
林霍姆先生{
字体大小：150%；
文字装饰：无；
颜色：var（--aa颜色）；
右边距：0%；
左缘：2%；
显示：内联块；
}
.linkwork{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
林卡约先生{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
林克社区{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
.linkculture{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
/*结束导航栏*/


亚的斯亚贝巴阿贝巴之家

我可能会这样做，垂直选择有很多单点

/*开始变量*/
：根{
--aa颜色：#57C324；
}
/*结束变量*/
* {
框大小：边框框；
保证金：0；
填充：0；
字体系列：“源Sans-Pro”，无衬线；
}
/*启动导航栏*/
.导航栏包装{
宽度：100%；
填充物：2%10%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
盒影：5px10px 8px#8888888；
}
.左边{
浮动：左；
宽度：50%；
}
.右侧{
宽度：50%；
}
.选项{
文字装饰：无；
显示器：flex；
柔性流：柱包裹；
对齐内容：柔性端；
}
林霍姆先生{
字体大小：150%；
文字装饰：无；
颜色：var（--aa颜色）；
右边距：0%；
左缘：2%；
显示：内联块；
}
.linkwork{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
林卡约先生{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
林克社区{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
.linkculture{
字体大小：150%；
文字装饰：无；
颜色：黑色；
右边距：0%；
左缘：2%；
显示：内联块；
}
/*结束导航栏*/


亚的斯亚贝巴阿贝巴之家

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Addis Abeba | Home</title>
        <link rel="stylesheet" href="/css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <!-- Start Navbar -->
        <nav>
            <div class="navbar-wrapper">
                <div class="leftside">

                </div>
                <div class="rightside">
                    <div class="options">
                        <a href="#" class="linkhome">Home</a>
                        <a href="#" class="linkwork">Our Work</a>
                        <a href="#" class="linkabout">About Us</a>
                        <a href="#" class="linkcomunnity">Our Community</a>
                        <a href="#" class="linkculture">Culture</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- End Navbar -->
    </body>
</html>

/* Start Variables */
:root{
    --aa-color: #57C324;
}
/* End Variables */

* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Start Navbar */

.navbar-wrapper{
    width: 100%;
  padding: 2% 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
    box-shadow: 5px 10px 8px #888888;
}

.leftside{

}

.rightside{
    float: right;
}

.options{
    text-decoration: none;
}

.linkhome{
    font-size: 150%;
    text-decoration: none;
    color: var(--aa-color);
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkwork{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkabout{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkcommunity{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkculture{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

/* End Navbar */