将父flex容器宽度调整为子flex容器内容宽度时出现问题。
使用Bulma,我有以下HTML结构
.signup-form {
display:inline-flex;
align-items: center;
}
<div class="body">
<div class="is-active modal">
<div class="modal-background">
</div>
<div class="modal-card signup-form">
<header class="modal-card-head has-text-centered">
<button class="delete"></button>
<p class="modal-card-title">Title</p>
</header>
<section class="modal-card-body">
<input class="input" placeholder="Name"/ >
<input class="input" placeholder="Phone Number"/ >
<input class="input" placeholder="Email"/ >
<input class="input" placeholder="Address"/ >
</section>
<footer class="modal-card-foot">
<nav class="page-control level has-text-centered is-mobile">
<a class="button is-small is-info">
Next
</a>
</nav>
</footer>
</div>
</div>
</div>
但它最终应用于所有子flex容器,如您所见:
http://codepen.io/anon/pen/mWqRxW
如何解决这个问题,并使父flex容器适合子flex容器的宽度(在本例中是输入的宽度)?
您只需添加:
header,
footer{
width: 100%;
}
所以它需要所有可用的宽度。这是你想要的还是我有什么误解?
我有一个容器 ,其中 。它有一个子 。 怎样才能让孩子显得“内联”呢? 具体地说,我如何使孩子的宽度由它的内容决定,而不是扩展到父母的宽度? 我所尝试的: 我将子项设置为,但它仍然占用了整个宽度。我也尝试了所有其他显示属性,但都没有效果。 示例: null null http://codepen.io/donpinkus/pen/ygrxry 共2个答案 匿名用户 在容器上使用或在弹性项上使用。
问题内容: 我有一个容器用。它有一个孩子。 我怎样才能使孩子显得“内联”? 具体来说,如何使孩子的宽度取决于其内容,而不扩展到父母的宽度? 我试过的 我将孩子设置为,但仍然占用了整个宽度。我还尝试了所有其他显示属性,但没有任何效果。 例: 问题答案: 使用的容器上,或在柔性的项目。 不需要。 flex容器的初始设置为。这意味着柔性物品将沿横轴扩展以覆盖容器的整个长度。 该属性的作用与之相同,除了适
如果我调整窗口的大小小于最小宽度flex项目的总数(此处为653px),则会出现一个滚动条,但flexbox采用当前窗口的大小,并且flex项目没有红色背景,我想知道如何在不键入以下特定值的情况下为flexbox容器设置最小宽度: 我不希望收缩flex项目,但一个css的方式来获得: flexbox.min(flex_items_min_width) https://codepen.io/papa
问题内容: 我在CSS的width属性上遇到了一些麻烦。我在div中有一些段落。我想使段落的宽度等于它们的内容,以使它们的绿色背景看起来像文本的标签。相反,我得到的是这些段落继承了div父节点的宽度,该宽度更宽。 问题答案: 默认情况下,标签是元素,这意味着它们占据了parent的100%。 您可以使用以下方法更改其显示属性: 但这使元素并排。 要使每个元素保持独立行,可以使用: (如果您使用fl
问题内容: 在下面的示例中,我有一个具有以下样式的按钮… 但是它会自动缩放到100%,而不是内容的宽度。您可以设置一个明确的宽度,但是那样一来您的文本就不能自然地换行。 如何制作一个内部文本以flexbox居中但不能增长到适合容器大小的按钮? 问题答案: 而不是使用容器。 这会将容器从块级(占用其父级的整个宽度)切换到内联级(占用其内容的宽度)。 这上浆行为类似于对比。
问题内容: 我需要一个解决方案 自动调节 的和一个勉强适合其内容。关键是加载后可以更改宽度和高度。我想我需要一个事件操作来处理iframe中包含的主体尺寸的变化。 问题答案: