Question

我正在处理顶部菜单，并且包含菜单项的div似乎无法适应它们。我对CSS很不好，很少使用它，所以如果这是一个简单的答案，我深表歉意。任何帮助将不胜感激！

JSFiddle：https://jsfiddle.net/uax30g8s/9/

<div className={`${styles.topMenuDesktop}`}>
    <div className={`${styles.desktopLogo}`}>
        Logo
    </div>
    <div className={`${styles.topMenuItems}`}>
        <div className={styles.topMenuItem}>Support</div>
        <div className={styles.topMenuItem}>Pricing</div>
        <div className={styles.topMenuItem}>Blog</div>
    </div>
    <div className={`${styles.topMenuAccount}`}>
        <button className={styles.login}>Login</button>
        <button className={styles.signupTop}>Signup</button>
    </div>
</div>

css：

.topMenuDesktop {
    display: flex;
}

.desktopLogo {
    width: 20%;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.topMenuItems {
    display: flex;
    margin-left: 8%;
}

.topMenuItem {
    margin-right: 30%;
    padding: 10px;
}

Answer 1

更新后的代码具有一些美学上的变化。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
}


.topMenu {
  width: 100%;margin:10px 0;
  height: 40px;
  display: flex;
}

.logo {
  width: 20%;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.menuItems {
  display: flex;
  margin-left: 8%;width:100%;
}

.menuItem{
  margin-right: 30%;
  padding: 10px;
}

.auth {
  display:flex;
}

.auth button {
  margin:0 10px;
}

<div class="topMenu">
  <div class="logo">
    Logo
  </div>
  <div class="menuItems">
    <div class="menuItem">Item</div>
    <div class="menuItem">Item</div>
    <div class="menuItem">Item</div>
  </div>
  <div class="auth">
    <button>Login</button>
    <button>Signup</button>
  </div>
</div>

div不会扩展以适合内容

1 个答案: