提高按钮并减小文本框的宽度 [英] Raise the button and decrease the width of the textbox

问题描述

总结一下，这是我的JSfiddle和我的代码

编辑小提琴 - JSFiddle [ ^ ]



我的目标是让蓝色按钮与文本框的行相同，文本框的宽度也不一样。理想情况下，它只需要4个字符。



我尝试了什么：



我已经尝试调整所有的配件，但仍然无法使其工作

Pretty much sums it up, here is my JSfiddle with my code
Edit fiddle - JSFiddle[^]

What my aim is, is to have the blue button be the same line as the text box, and also the textbox to not have as much width. Ideally it will only need 4 characters in it.

What I have tried:

I've tried adjusting all the parements but still cant get it working

推荐答案

请尝试以下：

Please try below:

// For making the blue button aligned with text box

// added this block
.addticket li:first-child {
    padding: 9px;  
}

// From this block, removed padding: 9px;  
.addticket li{
    display: inline-block;
    border:1px solid #DDDDDD;
    border-radius: 3px;
}

.addticket li:last-child{
    border: none;
    margin-bottom: 0px;
    text-align: center;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px; 
    height: 92px;
    padding: 9px 0;   // Added this line
}


// For making the textbox of less width
// You can add pixles instead of % for the below changed width
.addticket input,
.addticket textarea,
.addticket select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 20%;                    // changed this line from 100% to 20%
    display: block;
    outline: none;
    border: none;
    height: 92px;
    line-height: 25px;
    font-size: 40px;
    padding: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
}

// Changed this line in the HTML to make constraint to take 4 chars only
// Added maxlength attribute.
<input type="text" name="tableNameEditor" id="tableNameEditor" maxlength="4">

</input>

希望这可以帮助你:)。

Hope this helps you :).

这篇关于提高按钮并减小文本框的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！