个人中心
gpt4 book ai didi

Button not having a width in flex?(按钮没有弹性宽度吗？)

转载 作者：bug小助手 更新时间：2023-10-25 10:18:08 24 4
gpt4 key购买 nike



i tried to have 2 buttons in my flex carousel but it doesnt accept a width. I have been trying some things but they dont seem to change anything.

我试着在我的弹性旋转木马上有两个按钮，但它不接受宽度。我一直在尝试一些东西，但它们似乎改变不了什么。




#container {
  height: 85vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.slide {
  position: relative;
}

img {
  position: relative;
  height: 60vh;
  width: 40vw;
  border-radius: 20px;
}

button[id*='button-'] {
  background-color: red;
  height: 10vh;
  width: 109000px;
  border: none;
}

<div id="container">
  <div class="slide">
    <img src="./img/roos.jpg" alt="foto van roos" />
    <h1 class="text-image">"Life is short"</h1>
  </div>
  <button id="button-previous"></button>
  <div class="slide">
    <img src="./img/hands.png" alt="foto van 2 handen als een hartje" />
    <h1 class="text-image">"Love is in the air"</h1>
  </div>
  <button id="button-next"></button>
  <div class="slide">
    <img src="./img/tree.jpg" alt="foto van een boom" />
    <h1 class="text-image">"Nature is life"</h1>
  </div>
</div>




i tried to give the buttons multiple types of width and checked if it worked by removing them from the flexbox and that worked.

我试着给按钮设置多种宽度，并通过将它们从Flexbox中移除来检查它是否起作用了，而且起作用了。


更多回答

Add flex-shrink: 0; on the buttons. Flex items shrink by default to fit inside the flex container. You might want to reduce the width given to images.

在按钮上添加Flex-Shrink：0；。默认情况下，Flex项目会缩小以适合Flex容器。您可能希望减小图像的宽度。

I think what Yousaf said is correct and alternatively, you can wrap the buttons with div. That will work too.

我认为Yousaf说的是正确的，或者，你可以用div来包装按钮。这也会奏效的。

优秀答案推荐

A button width is base on the content of it inside. this is a sample of it. What I usually do is to trick it this way (   and put a text inside and color it transparent). then you can put a letter-spacing on it, font-size, padding and however you want it to make your proper width you want. You can alson enclosed the button on a div and then make the parent of the button work on the width. Let me know if this is what are you trying to attain.

按钮宽度取决于按钮内部的内容。这就是其中的一个例子。我通常做的是这样做(把一个文本放在里面，然后把它涂成透明的)。然后你可以在上面加一个字母间距，字体大小，填充，以及你想要的任何方式来使它成为你想要的合适的宽度。您还可以将按钮封闭在div上，然后让按钮的父级控制按钮的宽度。如果这就是你要达到的目的，请让我知道。




#container {
  height: 85vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
}

.slide {
  position: relative;
}

img {
  position: relative;
  height: 60vh;
  width: 40vw;
  border-radius: 20px;
}

#button-previous, #button-next{
  background-color: red;
  height: 10vh;
  width: auto;
  border: none;
  font-size: 20px;
  letter-spacing: 20px;
  color: transparent;
  padding: 0px 20px;
}

<div id="container">
  <div class="slide">
    <img src="./img/roos.jpg" alt="foto van roos" />
    <h1 class="text-image">"Life is short"</h1>
  </div>
  <button id="button-previous">&nbsp;<&nbsp;</button>
  <div class="slide">
    <img src="./img/hands.png" alt="foto van 2 handen als een hartje" />
    <h1 class="text-image">"Love is in the air"</h1>
  </div>
  <button id="button-next">&nbsp;>&nbsp;</button>
  <div class="slide">
    <img src="./img/tree.jpg" alt="foto van een boom" />
    <h1 class="text-image">"Nature is life"</h1>
  </div>
</div>





I believe that you should be using flex-basis instead of width, when dealing with a flex item:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

我认为在处理弹性项时，您应该使用弹性基数而不是宽度：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis


flex-grow is another option to set a relative size:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

Flex-Growth是设置相对大小的另一个选项：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow


When using flex, you are telling it to manage the sizes instead, so width will be ignored. This makes more sense when you consider that flex can use flex-direction to decide to render things vertically and then flex-basis would be setting the height instead.

当使用flex时，您告诉它管理大小，因此宽度将被忽略。考虑到Flex可以使用Flex方向来决定垂直渲染对象，然后Flex-Basis将改为设置高度，这就更有意义了。


更多回答

24 4 0
文章推荐： How can I resolve "UserWarning: The palette list has more values (10) than needed (4), which may not be intended"?(如何解析“UserWarning：调色板列表的值(10)多于所需的值(4)，这可能不是故意的”？)
文章推荐： How to use adobe javascript to saveas a pdf file to path with dollar sign(如何使用adobe脚本另存为带美元符号的pdf文件路径)
文章推荐： Counting FPS using SELENIUM(用硒计数FPS)
文章推荐： Mutating a method-scoped variable from another method(从另一个方法中变异方法作用域的变量)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com