如何编辑CSS所以按钮出现在输入字段的同一行？

Question

这是购物车内的一个问题，不幸的是，这是一个多步骤的过程来查看它：

1. https://blendbee.com/shop/black-tea-blends/happy-times/
2. 点击其中一个＆＃34;添加到购物车＆＃34;按钮
3. 点击＆＃34;查看购物车＆＃34;
4. 请注意＆＃34;申请礼品卡＆＃34;按钮出现在下面一行。 我希望它能够出现在＆＃34;礼品车＆＃34;输入字段。



先谢谢你们！你摇滚。

Answer 1

由于您已经具有内联样式：

<input name="giftcard_code" class="input-text" id="giftcard_code" style="line-height: 1em; padding-top: 6px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; margin-top: 0px; margin-right: 4px; margin-bottom: 0px; margin-left: 0px; border-top-color: #e0dadf; border-right-color: #e0dadf; border-bottom-color: #e0dadf; border-left-color: #e0dadf; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: left; outline-width: 0px; outline-style: none; outline-color: invert; box-sizing: border-box; box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.1);" type="text" placeholder="Gift Card" value=""/>

插入：

width:100px; display:inline;

style属性中的任何位置都是这样的：

<input name="giftcard_code" class="input-text" id="giftcard_code" style="width:100px; display:inline; line-height: 1em; padding-top: 6px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; margin-top: 0px; margin-right: 4px; margin-bottom: 0px; margin-left: 0px; border-top-color: #e0dadf; border-right-color: #e0dadf; border-bottom-color: #e0dadf; border-left-color: #e0dadf; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; float: left; outline-width: 0px; outline-style: none; outline-color: invert; box-sizing: border-box; box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.1);" type="text" placeholder="Gift Card" value=""/>

Answer 2

HTML：

    <div id="entry">
        <form>
            <input id="input" placeholder="Coupon Code"></input>
            <button id="submit" type="submit">Apply Coupon</button>
        </form>
    </div>

CSS：

input {
    display: inline;
    width: 70%;
}
button {
    display: inline;
    width: 20%;
}

宽度使它们两个永远不会“溢出”包含div的宽度。

Answer 3

这应该有效（CSS）：

#giftcard_code {width: 300px;}

随意更改＆＃34;宽度＆＃34;任何东西:)有这么多的浮动，你必须指定元素的尺寸，因为在这些情况下浏览器认为100％宽度。