css 我怎样才能把一个flex元素移到中间，并保持它以前的一些响应性

ehxuflar  于 2023-05-02  发布在  其他
关注(0)|答案(3)|浏览(108)

我用flexbox创建了一个导航栏。我很满意，但我认为导航有点偏右。我怎样才能把它移到左边，使它具有和以前一样的响应能力？

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header {
  width: 100%;
  background-color: #f4f4f4;
  height: 08rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  column-gap: 15rem;
}

.nav {
  text-transform: uppercase;
  font-family: "Lato";
}

.main-nav {
  display: flex;
  font-size: 2rem;
}

.main-nav__link {
  padding: 0rem 1.5rem;
  text-decoration: none;
  text-align: center;
  display: block;
  color: #34495e;
}

.main-nav__link:hover {
  color: #718daa;
}

.logo {
  font-family: "Montserrat";
}

.logo__link {
  color: #34495e;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 700;
  text-decoration: none;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
<div class="container">
  <header class="header">

    <!-- insert logo image -->
    <!-- <img src="img/logo.png" alt="Tolani Logo" class="logo"> -->
    <!-- or -->
    <!-- Use A Logo Image -->
    <h1 class="logo"><a href="/" class="logo__link">Tolani Alumni</a></h1>

    <nav class="nav">
      <ul class="main-nav">
        <li class="main-nav-list"><a class="main-nav__link" href="#">Home</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">About</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">College</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">Events</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">BOk</a></li>
      </ul>
    </nav>

    <button class="btn btn-login">Login</button>

  </header>
</div>

我怎样才能把一个flex元素移到中间，并保持它以前的一些响应性

css

3条答案

按热度按时间
hs1rzwqc

hs1rzwqc1#

也许你可以试着改变。导航属性到
1.位置：绝对;

  1. left：4%;您可以使用尝试和错误来获得所需的结果。为了保持响应性，我建议以%表示。
赞(0）分享  回复(0）举报  2023-05-02
bkhjykvo

bkhjykvo2#

我对你的代码做了一些小的修改，并用注解标记了它们。现在可以使用差距属性。在logo和导航栏之间留出空间。
实际上，我将logo和nav链接 Package 在同一个容器中，对其应用了flex属性，并在头部添加了一些填充。
您需要编写媒体查询，使其对其他设备做出响应。

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header {
  width: 100%;
  padding-left: 4rem; /* left padding added */
  padding-right: 4rem;  /* right padding added */
  background-color: #f4f4f4;
  height: 08rem;
  display: flex;
  justify-content: space-between;  /* space-around changed to space-between */
  align-items: center;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  column-gap: 15rem;
}

.nav {
  text-transform: uppercase;
  font-family: "Lato";
  display: flex;    /* making the nav container flex */
  gap: 5rem;        /* adding gap of 5rem between logo and nav */
  align-items: center;  
}

.main-nav {
  display: flex;
  font-size: 2rem;
}

.main-nav__link {
  padding: 0rem 1.5rem;
  text-decoration: none;
  text-align: center;
  display: block;
  color: #34495e;
}

.main-nav__link:hover {
  color: #718daa;
}

.logo {
  font-family: "Montserrat";
}

.logo__link {
  color: #34495e;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 700;
  text-decoration: none;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}
<div class="container">
  <header class="header">

    <!-- insert logo image -->
    <!-- <img src="img/logo.png" alt="Tolani Logo" class="logo"> -->
    <!-- or -->
    <!-- Use A Logo Image -->
    <!-- wrapping logo in nav -->
    <nav class="nav">
    <h1 class="logo"><a href="/" class="logo__link">Tolani Alumni</a></h1>

      <ul class="main-nav">
        <li class="main-nav-list"><a class="main-nav__link" href="#">Home</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">About</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">College</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">Events</a></li>
        <li class="main-nav-list"><a class="main-nav__link" href="#">BOk</a></li>
      </ul>
    </nav>

    <button class="btn btn-login">Login</button>

  </header>
</div>
赞(0）分享  回复(0）举报  2023-05-02
wtzytmuj

wtzytmuj3#

以下是我所做的更改：

  • 标签：type="button"
  • 将CSS：html { box-sizing: border-box; font-size: 62.5%; }移到顶部，以便更好地级联
  • 将css中的ul更改为.main-nav，因为我添加了这个列表，所以它是“坏的”-使用CSS的类而不是元素标签，除非您正在开发一个“库”，如bootstrap或类似的
  • 将.main-nav CSS全部移到一个位置。如果你有一个以上的可能你的CSS需要更多的工作
  • 移动了.nav和.header，因为我更喜欢自顶向下，这就是CSS中的C（级联）
  • 将.main-nav__link和.logo__link更改为.main-nav-link和.logo-link，因为我讨厌CSS中的下划线，因为很难说有多少，我不喜欢混合破折号和下划线
  • 更改了height: 08rem; to height: 8rem;，因为它更清晰
  • 删除了.main-nav { margin: 0; padding: 0;，因为这些已在上面设置
  • 把*，与其他人，而不是一个单独的组没有理由
  • 将ul.main-nav{ font-size: 0; }放在处理边距上，并将大小放在li.main-nav-list{ font-size: 2rem; } ref上：How to remove the default margin of inline li elements?
  • <h1 class="logo"></h1>未显示
  • 在html上设置font-size: 16px;，在body { font-size: 0.625em; }上设置10 px字体，因为大多数浏览器默认为16 px大小和10/16 = 0。625
  • 设置一个3列的网格，高度为8 rem
header.header {
    display: grid;
    grid-template-columns: 5.5rem auto 5.5rem;
    grid-template-rows: 8rem;
    align-items: center;
    gap: 1em;
    padding-left: 1rem;
    padding-right:1rem;
}

在我设置Flex（中心）为小屏幕 Package 后

html {
  box-sizing: border-box;
  font-size: 16px;
}

body {
  font-size: 0.625em;
  margin: 0;
  padding: 0;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  border: solid 1px red;
  width: 100vw;
}

header.header {
  display: grid;
  grid-template-columns: 5.5rem auto 5.5rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
  padding-left: 1rem;
  padding-right: 1rem;
}

.header {
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.nav {
  text-transform: uppercase;
  font-family: "Lato";
}

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

ul.main-nav {
  list-style: none;
  font-size: 0;
}

.main-nav li.main-nav-list {
  font-size: 2rem;
  border: 1px solid green;
}

.main-nav-link {
  padding: 0rem 1.5rem;
  text-decoration: none;
  text-align: center;
  display: block;
  color: #34495e;
}

.main-nav-link:hover {
  color: #718daa;
}

.logo {
  font-family: "Montserrat";
}

.logo>.logo-link {
  color: #34495e;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 700;
  text-decoration: none;
}

/* not part of your CSS below here */

.body-container {
  width: 100%;
  padding: 2rem;
  font-size: 1rem;
  border: solid 1px blue;
  background-color: #0080FF11;
}
.body-container li{
border: 1px solid #808080;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.body-container code {
  background-color: #E0E0E0;
}
<div class="container">
  <header class="header">
    <h1 class="logo"><a href="/" class="logo-link">Tolani Alumni</a></h1>
    <nav class="nav">
      <ul class="main-nav">
        <li class="main-nav-list"><a class="main-nav-link" href="#">Home</a></li>
        <li class="main-nav-list"><a class="main-nav-link" href="#">About</a></li>
        <li class="main-nav-list"><a class="main-nav-link" href="#">College</a></li>
        <li class="main-nav-list"><a class="main-nav-link" href="#">Events</a></li>
        <li class="main-nav-list"><a class="main-nav-link" href="#">BOk</a></li>
      </ul>
    </nav>
    <button class="btn btn-login" type="button">Login</button>
  </header>
</div>
<div class="body-container">
  <ul>
    <li>Added: <code>type="button"</code></li>
    <li>Moved CSS: <code>html { box-sizing: border-box; font-size: 62.5%; }</code> to the top where it cascades better </li>
    <li>Changed <code>ul</code> in css to <code>.main-nav</code> since I added this list it was "broken" - use classes not elment tag for CSS unless you are developing a "library" like bootstrap or the like</li>
    <li>Moved the <code>.main-nav</code> CSS all to one plac. If you have to have more than one it is likely your CSS needs more work</li>
    <li>Moved <code>.nav</code> and <code>.header</code> since I prefer top down which is what the C in CSS is about (cascade)</li>
    <li>Changed <code>.main-nav__link</code> and <code>.logo__link</code> to <code>.main-nav-link</code> and <code>.logo-link</code> since I hate underscores in CSS because it it hard to tell how many there are and I dislike mixed dash and underscores</li>
    <li>Changed <code>height: 08rem;</code> to <code>height: 8rem;</code> because it was more clear</li>
    <li>Removed <code>.main-nav {
  margin: 0;
  padding: 0;</code> since those were already set above</li>
    <li>Put <code>*,</code> with the others instead of a separate group for no reason</li>
    <li>Put <code>ul.main-nav{
  font-size: 0;
}</code> on to deal with margins and put the size on the<code>li.main-nav-list{
  font-size: 2rem;
  }</code> ref: https://stackoverflow.com/q/20805028/125981
      <li><code>&lt;h1 class="logo">&lt;/h1></code> was not showing up</li>
      <li>Set <code>  font-size: 16px;</code> on the html and <code>body {
  font-size: 0.625em;
}</code> to set your 10px font since most browsers default to 16px size and <code>10/16 = 0.625</code></li>
      <li>Setup a grid with 3 columns and the 8rem height you had
        <pre>header.header {
  display: grid;
  grid-template-columns: 5.5rem auto 5.5rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
  padding-left: 1rem;
  padding-right:1rem;
}
</pre> after I set the flex (center) to wrap for small screens</li>
  </ul>
</div>

精简且无ul/li示例：这是最重要的部分：

header.header {
  display: grid;
  grid-template-columns: 1rem 5.5rem auto 5.5rem 1rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
}
body {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  width: 100vw;
  background-color: #f4f4f4;
}

header.header {
  display: grid;
  grid-template-columns: 1rem 5.5rem auto 5.5rem 1rem;
  grid-template-rows: 8rem;
  align-items: center;
  gap: 1em;
}

header.header {
  /* same selector as prior but just the visual style parts */
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 0.875em 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 0.875em 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0.875em 0 rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 0.33em;
  -moz-border-radius: 0.33em;
  border-radius: 0.33em;
}

.logo {
  grid-column: 2;
  font-family: "Montserrat";
}

.nav {
  grid-column: 3;
  font-family: "Lato";
}

.btn.btn-login {
  /* not really needed but here to be consistent */
  grid-column: 4;
}

.logo>.logo-link {
  color: #34495e;
  font-weight: 700;
  text-decoration: none;
}

.nav .main-nav {
  font-size: 1.5em;
  display: flex;
  gap: 0.5em;
  justify-content: center;
  flex-wrap: wrap;
}

.nav .main-nav .main-nav-link {
  text-decoration: none;
  color: #34495e;
}

nav .main-nav .main-nav-link:hover {
  color: #718daa;
}
<div class="container">
  <header class="header">
    <div class="logo"><a href="/" class="logo-link">Tolani Alumni</a></div>
    <nav class="nav">
      <div class="main-nav">
        <div class="main-nav-list"><a class="main-nav-link" href="#">Home</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">About</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">College</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">Events</a></div>
        <div class="main-nav-list"><a class="main-nav-link" href="#">BOk</a></div>
      </div>
    </nav>
    <button class="btn btn-login" type="button">Login</button>
  </header>
</div>
赞(0）分享  回复(0）举报  2023-05-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com