在使父 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 容器的宽度(在本例中为输入的宽度)?
最佳答案
关于html - flex 容器宽度适合内容宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42844305/