css 我怎样才能让这个按钮不再占据flex容器的整个宽度呢？

wlwcrazw 于 2023-05-30 发布在其他

关注(0)|答案(4)|浏览(157)

我有一个Flex容器，Flex方向设置为3个项目的行。我需要所有3个项目在一个单一的行，与第一个和最后一个项目的最左边和右边分别，和中间的第二个项目要居中。我得到的问题是按钮（第三十三项）是伸展超宽，并填补了整个宽度在其各自的空间。任何帮助在这里非常感谢。

.parent {
  display: flex;
  flex-direction: row;
}

.left, .right {
  flex: 1;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right"></div>
</div>

当前：

期望：

我现在尝试的：
主要母公司部门：

按钮Div：

按钮文本现在正确地位于右侧，但按钮上的左侧填充仍然一直向外延伸。

css

来源：https://stackoverflow.com/questions/76335624/how-can-i-make-this-button-stop-taking-up-the-whole-width-within-a-flex-containe

4条答案

按热度按时间

envsm3lx1#

对于初学者，您的标记无效。<button>应该是小写的，并且应该有一个结束</button>，而不是结束</div>。一旦你纠正了这一点...
可以使用justify-content控制元素的间距。另外，去掉flex: 1;规则，因为它明确地告诉元素 * 增长 *。
例如：

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right"></button>
</div>

赞(0）回复(0）举报 2023-05-30

epggiuax2#

您可以将<button> Package 在<div class="right">中，并在其上使用justify-content: end：

.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}

.right {
  display: flex;
  justify-content: end;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">
    <button>RightFoobarLoremIpsum</button>
  </div>
</div>

...或使用display: grid并将justify-self: end设置为.right：

.parent {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.right {
  justify-self: end;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right">RightFoobarLoremIpsum</button>
</div>

赞(0）回复(0）举报 2023-05-30

lf5gs5x23#

您正在两个边项上设置flex: 1。像这样指定，它设置flex-grow: 1和flex-basis: 0：你是在告诉两个边项增长，而不是中心项。
你可以让所有的物品都不生长，均匀地分布它们，也可以让中间的物品生长，而不让旁边的物品生长。
分发：

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.parent > * {
  outline: 1px solid red;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right">Right</div>
</div>

成长：

.parent {
  display: flex;
  flex-direction: row;
}

.parent > * {
  outline: 1px solid red;
}

.center {
  flex-grow: 1;
  text-align: center;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right">Right</div>
</div>

此外，您的按钮标记无效：你用</div>标签关闭它。

赞(0）回复(0）举报 2023-05-30

uhry853o4#

将按钮放入<div class="right">中

.parent {
  display: flex;
  flex-direction: row;
}

.left {
  flex: 1;
  text-align: left;
}

.right {
  flex: 1;
  text-align: right;
}

.btn {
  padding: 0 10px;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"><button class="btn">test</button></div>
</div>

赞(0）回复(0）举报 2023-05-30

我来回答

css 我怎样才能让这个按钮不再占据flex容器的整个宽度呢？

4条答案

相关问题

热门标签

最新问答