首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >弹性导航未对齐

弹性导航未对齐
EN

Stack Overflow用户
提问于 2016-06-28 20:47:29
回答 1查看 91关注 0票数 0

好吧,我正在学习flexbox,但是我不明白为什么我的导航标题在链接的上方。

HTML:

代码语言:javascript
运行
AI代码解释
复制
<style>
    @import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
    .box {
      display: flex;
    }

    .item {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: auto;
      color: #fff;
    }

    nav {
      font-family: "Oswald", sans-serif;
      display: flex;
      min-width: 100%;
      background-color: #181818;
    }
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
        max-width: 960px
    }
    nav a {
      display: block;
      padding: 1rem;
      text-decoration: none;
      color: #fff;
      font-weight: 400;
      transition: all 0.3s ease-in-out;
    }
    nav a:hover {
      color: #343434;
    }

    .title {
      margin: 0 35px 0 10px;
      color: #1BC;
    }

                </style>    

    <nav>
        <div class="container">
      <a class="title">Architect</a>
      <ul>
        <li><a href="#">Getting Started</a></li>
        <li><a href="#">Examples</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Forum</a></li>
      </ul>
        </div>
    </nav>

容器CSS:

代码语言:javascript
运行
AI代码解释
复制
.container{
  width: 100%;
  margin: 0 auto:
  max-width: 1200px;
}

代码笔链接:http://codepen.io/ZoidCraft/pen/XKMewy

我想标题“建筑师”是对齐的链接左侧。

EN

回答 1

Stack Overflow用户

发布于 2016-06-28 21:03:09

在css中将<a class="title">Architect</a>设置为display: block;。块级元素将占据它们自己的行。display: flex;元素也将占据它们自己的行。

要解决您的问题,您可以首先从nav a样式中删除该display: block;。然后将您的nav uldisplay: flex;更改为display: inline-flex;。现在,您只需要向nav添加一些填充,因为现在一切都是内联显示的,所以需要向nav添加padding: 1em 0;

这是我所说的更新后的CodePen

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38086023

复制
相关文章
常见算法的时间复杂度 Ο(1)<Ο(log2n)<Ο(n)<Ο(nlog2n)<Ο(n2)<Ο(n3)<…
说实话,我是真的不懂算法。但是,我知道一个算法的好坏,通常时间复杂度是一个评价的指标之一。
业余草
2019/06/20
8.6K0
时间复杂度O(n)和空间复杂度
算法对于敲代码的应该都听过,不管是复杂的还是简单的,衡量算法效率的两个重要指标就是时间复杂度和空间复杂度。
wade
2020/04/24
7790
n2n动态路由异地组网方案
By HKL, on Friday 2021-07-23 18:51, tagged: 🏷️Linux 🏷️Operating 🏷️Networking
hiplon
2023/10/18
1.4K0
n2n动态路由异地组网方案
网络之NAT 和N2N V**
N2N V** 应用指南 N2N 是一个P2P的开源V**项目,具有内网穿透成功率高,去中心化,流量加密,使用简单的特点, 在笔者公司内部已经有近3年的使用经验,实践证明,N2N具备较为优秀的稳定性和安全性,,具备低成本替代专线需求的能力。在笔者的实践经验中,N2N用在多IDC之间的网络互通,多IDC上容器网络的互通。 表现的都很出色。
Laikee
2022/04/25
2.2K0
网络之NAT 和N2N V**
c++ 字典顺序生成全排列,蛮力算法时间复杂度 Θ(n*n!)
{1,2,3} 字典顺序全排列 {1,2,3}     {1,3,2}     {2,1,3}     {2,3,1}     {3,1,2}     {3,2,1}
用户7886150
2021/02/05
8840
最长单调子序列 复杂度nlog(n)
//最长单调子序列 复杂度nlog(n) //参数(原序列,序列长度,生成的序列),传入序列长度必须大于0 //返回值中lengthRecord中前k项表示长度为k的最小字序列 //LIScmp为关系函数,原函数表明lengthRecord为递增(不含等于) typedef double LISTYPE; #define LISMAXN 10000 int LIScmp(LISTYPE a,LISTYPE b) { return a < b; } long LISLength(LISTYPE lis
owent
2018/08/01
3190
建堆时间复杂度是o(n)
down_heapify() https://afteracademy.com/blog/operations-on-heaps book上用法
早起的鸟儿有虫吃
2021/06/25
2.5K0
建堆时间复杂度是o(n)
BAT面试题43:log(n)时间复杂度下求n次幂
https://blog.csdn.net/weixin_42292229/article/details/86742650
double
2019/03/07
7510
21 N-Repeated Element in Size 2N Array
In a array A of size 2N, there are N+1 unique elements, and exactly one of these elements is repeated N times.
devi
2021/08/18
4110
2022-07-17:1、2、3...n-1、n、n、n+1、n+2... 在这个序列中,只有一个数字有重复(n)。 这个序列是无序的,找到重复数字n。 这个序
2022-07-17:1、2、3...n-1、n、n、n+1、n+2...在这个序列中,只有一个数字有重复(n)。这个序列是无序的,找到重复数字n。这个序列是有序的,找到重复数字n。答案2022-07-17:不能用哈希表。第一问,两种方法,快慢指针找环问题和异或法。第二问,二分法。代码用rust编写。代码如下:use rand::Rng;use std::collections::HashSet;fn main() { let nn: i32 = 10; let test_time: i32 =
福大大架构师每日一题
2022/07/17
8540
2022-07-17:1、2、3...n-1、n、n、n+1、n+2... 在这个序列中,只有一个数字有重复(n)。 这个序列是无序的,找到重复数字n。 这个序
去掉 Attention 的 Softmax,复杂度降为 O (n)
众所周知,尽管基于 Attention 机制的 Transformer 类模型有着良好的并行性能,但它的空间和时间复杂度都是 O(n2)\mathcal {O}(n^2) 级别的,nn 是序列长度,所以当 nn 比较大时 Transformer 模型的计算量难以承受。近来,也有不少工作致力于降低 Transformer 模型的计算量,比如模型剪枝、量化、蒸馏等精简技术,又或者修改 Attention 结构,使得其复杂度能降低到 O(nlog⁡n)\mathcal {O}(nlog⁡n) 甚至 O(n)\mathcal {O}(n)
mathor
2021/05/12
1.2K0
n2n使用和编译(以及未解决的问题)
armbian需要提前安装cmake gcc等软件,以及: apt-get install pkg-config
Laikee
2022/04/25
1.1K0
LeetCode 961. N-Repeated Element in Size 2N Array
In a array A of size 2N, there are N+1 unique elements, and exactly one of these elements is repeated N times.
Angel_Kitty
2019/01/30
5440
java - 手写LRU(使用链表,时间复杂度O(n))
最简单的LRU实现,底层存储采用链表结构,时间复杂度为O(n) 代码如下: package com.jfp; /** * @author jiafupeng * @desc * @create 2021/3/12 15:58 * @update 2021/3/12 15:58 **/ public class Test { public static void main(String[] args) { LRUCache lruCache = new LRUCache
夹胡碰
2021/03/19
8150
MapReduce:N keys,N files
MapReduce中,不管是map阶段还是reduce阶段,二者的输入和输出都是key,value类型的值。现在有个需求是根据map阶段返回值key的个数,生成相应个数的文件。也就说一个key写到一个文件中,每个文件只能包含一个key。
YG
2018/12/14
8340
求m的n次方(优化时间复杂度)
假设m为3,n为9,公式为:3 x 3 x 3 x 3 x 3 x 3 x 3 x 3 x 3 = 19683
余生大大
2022/11/02
8770
求m的n次方(优化时间复杂度)
[剑指offer] 求1+2+3+…+n
题目描述 求1+2+3+…+n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句(A?B:C)。 解题思路 累加不能用循环的话,那就试试递归吧。
尾尾部落
2018/09/04
4570
12:计算2的N次方
12:计算2的N次方 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB描述 任意给定一个正整数N(N<=100),计算2的n次方的值。 输入输入一个正整数N。输出输出2的N次方的值。样例输入 5 样例输出 32 提示高精度计算 1 #include<iostream> 2 #include<cmath> 3 #include<cstdio> 4 #include<cstring> 5 using namespace std; 6 int n;
attack
2018/04/11
2.1K0
究竟为什么,快速排序的时间复杂度是n*lg(n)? | 经典面试题
partition使用第一个元素t=arr[low]为哨兵,把数组分成了两个半区:
架构师之路
2021/11/10
1.6K0
究竟为什么,快速排序的时间复杂度是n*lg(n)? | 经典面试题
MapReduce:N keys,N files(二)
如果你看了MapReduce:N keys,N files(一)这篇文章,并按其介绍的方法尝试去将N个key映射到N的文件中,你会发现分割后数据量比分割前的要多,并且有些文件不能正常读取。 用presto读取的话,可能会报这种错:
YG
2018/12/14
8110

相似问题

在IIS日志文件夹上使用NTFS压缩是很好的做法吗?

20

从ssl证书中删除密码是很好的做法吗?

30

让nginx在/tmp目录中提供文件是很好的做法吗?

10

ROBOCOPY是一种很好的备份工具吗?

40

使用Rsync备份外部驱动器

110
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档