跨度内的文本将按钮向右推[重复]

Posted 2023-03-05

【中文标题】跨度内的文本将按钮向右推[重复]

【英文标题】：Text within span pushing buttons to the right [duplicate]

【发布时间】：2021-10-25 14:24:57

【问题描述】：

我正在尝试构建一个导航栏，左侧有一个徽标，中间有一些按钮，但我在放置徽标时遇到了一些麻烦。带有文本的跨度附在我的按钮旁边，如果我将它从我的nav 中取出，则徽标向右太远并将我的按钮推向左侧。这是 CSS：

:root 
  --nav-button-color: #ffc300;
  --nav-button-transparent: #ffc40093;
  --font-color-unselected: #737373;
  --font-color-selected: #fff;
  --roboto: "Roboto", sans-serif;
  --poppins: "Poppins", sans-serif;
  --font-bold-600: 600;
  --font-bold-700: 700;
  --font-bold-800: 800;
  --font-bold-900: 900;


* 
  font-family: var(--roboto);


.navigation 
  display: flex;
  justify-content: center;


.btn 
  margin: 5px;
  width: 110px;
  height: 30px;
  border: none;


.btn-nav 
  width: auto;
  height: auto;
  color: var(--font-color-unselected);
  font-size: 16px;
  font-weight: var(--font-bold-600);
  padding: 10px 15px;
  border-radius: 5px;
  background: none;
  transition: 0.4s;
  cursor: pointer;


.btn-nav-selected 
  color: var(--font-color-selected);
  background-color: var(--nav-button-color);


.logo 
  font-family: var(--poppins);
  color: var(--font-color-unselected);
  font-weight: var(--font-bold-800);
  font-size: 30px;



/*=============================*/

.btn-nav:hover 
  color: var(--font-color-selected);
  background-color: var(--nav-button-transparent);

<div class="nav-container">
  <nav class="navigation">
    <span class="logo">Logo</span>
    <button class="btn btn-nav btn-nav-selected">Home</button>
    <button class="btn btn-nav">Shop</button>
    <button class="btn btn-nav">What We Do?</button>
  </nav>
</div>

【参考方案1】：

你可以试试css grid：

:root 
  --nav-button-color: #ffc300;
  --nav-button-transparent: #ffc40093;
  --font-color-unselected: #737373;
  --font-color-selected: #fff;

  --roboto: "Roboto", sans-serif;
  --poppins: "Poppins", sans-serif;

  --font-bold-600: 600;
  --font-bold-700: 700;
  --font-bold-800: 800;
  --font-bold-900: 900;


* 
  font-family: var(--roboto);


.navigation 
  display: grid;
  grid-template-columns: auto 1fr;
  justify-items: center;
  align-items: center;


.btn 
  margin: 5px;
  width: 110px;
  height: 30px;
  border: none;


.btn-nav 
  width: auto;
  height: auto;
  color: var(--font-color-unselected);
  font-size: 16px;
  font-weight: var(--font-bold-600);
  padding: 10px 15px;
  border-radius: 5px;
  background: none;
  transition: 0.4s;
  cursor: pointer;


.btn-nav-selected 
  color: var(--font-color-selected);
  background-color: var(--nav-button-color);


.logo 
  font-family: var(--poppins);
  color: var(--font-color-unselected);
  font-weight: var(--font-bold-800);
  font-size: 30px;
  justify-self: flex-start;


/*=============================*/

.btn-nav:hover 
  color: var(--font-color-selected);
  background-color: var(--nav-button-transparent);

<>
  <div class="nav-container">
    <nav class="navigation">
      <span class="logo">Logo</span>
      <div class="menu">
      <button class="btn btn-nav btn-nav-selected">Home</button>
      <button class="btn btn-nav">Shop</button>
      <button class="btn btn-nav">What We Do?</button>
      </div>
    </nav>
  </div>
</>

【讨论】：

不需要为此将 flexbox 布局转换为网格。

当然，伙计，你是 100% 正确的 :) 你可以向 @Meriegg 展示如何使用 flex 来做到这一点。我只是喜欢网格 :) 干杯