Flexboxgrid.css不以导航选项卡为中心
我正在学习关于RoR的教程，他们使用柔性盒网格布局来给页面提供样式。
我有一个错误，柔韧性盒没有对我的导航标签，因为它应该这样做。
目前，我有4个不同的标签在导航栏加上一个标题。像这样:标题A，B，C，D
Flexbox应该将屏幕宽度的100%划分为5，以便为每个选项卡提供正确的间距，但是它不会这样做，并且所有的屏幕都停留在屏幕的中间。
这就是我希望得到任何帮助的原因。我做错什么了？
我在assets/stylesheets里救了assets/stylesheets。
我的application.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>Style.css是：
*{
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;
}回答 2
Stack Overflow用户
发布于 2015-07-06 18:25:31
Uriel使用不同版本的flex-box网格，他使用6.1.1版本，而您使用的是I来宾最新版本。
试试这个，把这个放在标题后面。在application.HTML.erb。
<link rel="stylesheet" href="//cdn.jsdelivr.net/flexboxgrid/6.1.1/flexboxgrid.min.css" type="text/css" />
或者从这里下载flexbox网格6.1.1：
https://github.com/kristoferjoseph/flexboxgrid。
希望你能听懂我糟糕的英语。
Stack Overflow用户
发布于 2015-06-22 14:39:16
我不知道ruby on，它似乎添加了自己的css库，但您可以尝试一下。
.row {
display: flex; /* Magic begins */
}
.col-md {
flex: 1; /* Distribute widths equally */
text-align: center; /* Center inner text */
}
* {
margin: 0px;
padding: 0;
}
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;
}
.no-list {
list-style: none;
}
.row {
display: flex; /* Magic begins */
}
.col-md {
flex: 1; /* Distribute widths equally */
text-align: center; /* Center inner text */
}<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">Inicio</li>
<li class="col-md">Diseno </li>
<li class="col-md">Programacion</li>
<li class="col-md">Tecnologia</li>
</ul>
</nav>
</header>
https://stackoverflow.com/questions/30982232
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号