Bulma标签不适合输入

2022-01-28 12:09:11 标签 htmlcssbulma

我只想让每个标签只占一行。

 <div class="container">
            <div class="columns">
                <div class="column"> 
                </div>
                <div class="column is-one-third">
                    <form>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class = "label" for="p1Name">PLAYER ONE</label>
                            </div>
                            <div class="field-body">
                                <input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="field-label is-normal">
                                <label class = "label" for="p2Name">PLAYER TWO</label>
                            </div>
                            <div class="field-body">
                                <input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="column">
                </div>
            </div>
        </div>

这就是正在发生的事情。这些标签不适合输入,它们占了一行以上

因此,我尝试向每个输入添加其他容器。它确实有效,但我们还有很多工作要做。标签和输入之间也有很大的差距。

<div class="column is-one-third">
                    <form>
                        <div class="field is-horizontal">
                            <div class="container">
                                <div class="columns">
                                    <div class="column is-4">
                                        <div class="field-label is-normal has-text-left">
                                            <label class = "label" for="p1Name">PLAYER ONE</label>
                                        </div>
                                    </div>
                                    <div class="column">
                                        <div class="field-body">
                                            <input type="text" id="p1Name" class="input is-link" placeholder="TYPE PLAYER NAME">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field is-horizontal">
                            <div class="container">
                                <div class="columns">
                                    <div class="column is-4">
                                        <div class="field-label is-normal has-text-left">
                                            <label class = "label" for="p2Name">PLAYER TWO</label>
                                        </div>
                                    </div>
                                    <div class="column">
                                        <div class="field-body">
                                            <input type="text" id="p2Name" class="input is-link" placeholder="TYPE PLAYER NAME">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="column">
                </div>

标签和输入之间有很大的差距

有没有更好的方法?

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码