Flexboxgrid.css不居中导航选项卡
我正在学习一个关于RoR的教程，他们使用flexbox网格布局为页面提供样式 我有一个错误，flexbox没有像应该做的那样对中我的导航选项卡 目前，我在导航栏中有4个不同的选项卡，外加一个标题。像这样：标题A B C D Flexbox应将100%的屏幕宽度划分为5，以便为每个选项卡提供正确的间距，但它不这样做，并且所有选项卡都停留在屏幕的中间 这就是为什么我会感激任何帮助。我做错了什么 我在Flexboxgrid.css不居中导航选项卡,css,ruby-on-rails,flexbox,Css,Ruby On Rails,Flexbox,我正在学习一个关于RoR的教程，他们使用flexbox网格布局为页面提供样式 我有一个错误，flexbox没有像应该做的那样对中我的导航选项卡 目前，我在导航栏中有4个不同的选项卡，外加一个标题。像这样：标题A B C D Flexbox应将100%的屏幕宽度划分为5，以便为每个选项卡提供正确的间距，但它不这样做，并且所有选项卡都停留在屏幕的中间 这就是为什么我会感激任何帮助。我做错了什么 我在assets/stylesheets中保存了flexboxgrid.css 我的application
assets/stylesheetsflexboxgrid.cssapplication.html.erb!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<header>
<nav class="be-red white large-padding">
<ul class="no-list row center-xs middle-xs">
<li class="col-md" >
<h1 class="no-margin" id="logo">Blog Facilito</h1>
</li>
<li class="col-md">
<%= link_to "Inicio", root_path %>
</li>
<li class="col-md">
Diseno
</li>
<li class="col-md">
Programacion
</li>
<li class="col-md">
Tecnologia
</li>
</ul>
</nav>
</header>
<%= yield %>
</body>
</html>
*{
margin: 0px;
}
a,a:visited{
color: inherit !important;
text-decoration: none;
}
#logo{
font-size: 1.2em;
}
.no-margin{
margin: 0px;
}
.be-red{
background-color: rgb(200,50,50);
}
.large-padding{
padding: 10px 7px;
}
.white{
color: white;
}
我不知道RubyonRails，它似乎添加了自己的css库，但你可以试试
.row {
display: flex; /* Magic begins */
}
.col-md {
flex: 1; /* Distribute widths equally */
text-align: center; /* Center inner text */
}
*{
边际：0px；
填充：0；
}
a、 a:参观了{
颜色：继承！重要；
文字装饰：无；
}
#标志{
字体大小：1.2米；
}
.没有边际{
边际：0px；
}
.是红色的{
背景色：rgb（200,50,50）；
}
.大衬垫{
填充：10px 7px；
}
怀特先生{
颜色：白色；
}
.没有名单{
列表样式：无；
}
.行{
显示：flex；/*魔术开始*/
}
上校医学博士{
弯曲：1；/*均匀分布宽度*/
文本对齐：居中；/*居中内部文本*/
}
-
博客设施
Inicio
编程
技术逻辑
希望你能理解我糟糕的英语 您的建议非常有效，但现在我想知道为什么它不从文件夹中加载flexboxgrid.css。实际上，我不应该在stylesheet style.css中添加新的css样式。