0

我想有两个相邻的按钮。我在外部 css 中使用下面的代码，但它们不会彼此相邻（参见图像电流输出）。我该怎么做？

谢谢您的帮助！

.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: left;
  width: 75%;
}
.shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: right;
  width: 75%;
  }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Webpage</title>
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
  </head>
  <body>

    <p class="about about1">ABOUT</p>
    <p class="shop shop1">SHOP</p>

  </body>
</html>

电流输出

4

3 回答 3

0

You got your width spanning a total of 150% of the webpage when you can only see 100%. Hence, why they are not side-by-side. I would recommend just setting each element to a width: 50%; so they are each take-up half of the page. You can also use Bootstrap to solve this - using two col-6's.

.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: left;
  width: 50%;
}
.shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: right;
  width: 50%;
  }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Webpage</title>
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
  </head>
  <body>

    <p class="about about1">ABOUT</p>
    <p class="shop shop1">SHOP</p>

  </body>
</html>

于 2021-11-16T18:20:33.933 回答
0

让按钮彼此相邻显示的最可靠方法是使用包装元素。这将创建一个块级布局边界，因此您只需专注于将按钮定位在父元素内。

例如：

.shop,
.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy, copperplate;
  width: 50%;
  float: left;
}
<div class="button-wrapper">
  <button class="about">ABOUT</button>
  <button class="shop">SHOP</button>
</div>

此更改创建了一个包裹按钮的块级元素，将按钮宽度设置为 50%，因此每个按钮占用父容器的一半空间，并将两个按钮向左浮动，以便它们边对边显示。

更好的选择可能是flexbox，它是为在 CSS 中创建线性布局而设计的。一般来说，flexbox 已经取代了浮动来定位布局元素，而浮动通常保留用于在内容流中定位元素（如图像）。

.button-wrapper {
  display: flex;
  justify-content: space-around;
}

.shop,
.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy, copperplate;
  flex-basis: calc(50% - 1rem);
}
<div class="button-wrapper">
  <button class="about">ABOUT</button>
  <button class="shop">SHOP</button>
</div>

在这里，我删除了 float 属性。您可以应用display: flex到父按钮包装器。这会将所有子元素（按钮）放置在一条水平线上。我还添加了诸如“space-around”之类的布局选项，它在每个子元素的两侧放置相等的空间。对于按钮本身，我使用flex-basis: calc(50% - 1rem);它们显示总父宽度的“半减 1rem”，以便在按钮周围留出一些装订线空间。

您可以在此处了解有关 flexbox 的更多信息：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2021-11-16T18:39:20.430 回答
0

你给了 75% 的宽度，所以它不会发生。给它宽度自动。

.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  float: left;
  width: auto;
}
.shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  float: right;
  width: auto;
  }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Webpage</title>
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
  </head>
  <body>

    <p class="about about1">ABOUT</p>
    <p class="shop shop1">SHOP</p>

  </body>
</html>

于 2021-11-16T18:12:41.983 回答