When I fill out my current form it shows the input as such:

But when Submitted the Form in Laserfiche shows:

It is wrapping the text and I am unsure why as I have used input on the CSS to hold the length.  Here's is the example code:

/*set both fields to display in an inline-block*/
#q6, #q7 {display : inline-block ; vertical-align:top;}

/*hide the labels to the left of the single line field*/
.inline-field .input {display : none;}
.inline-field .cf-label {display : none;}

/*set the sizing of the field, 
increase or decrease these values as desired*/
.inline-field input {width : 180px; min-width : 180px;}
.inline-field .cf-field {width : 180px; min-width : 180px;}

/*minimize the padding around field*/
ul li.inline-field {padding-left : 2px; padding-right : 2px;}
ul li.inline-field {padding-bottom : 0px; padding-top : 0px;}
.inline-field .cf-label {padding : 0px;}
.inline-field input {padding : 0px;}
.inline-field .cf-field {padding : 0px;}

/*set field to display in an inline-block*/
.inline-field {display : inline-block;}

/*remove left, right, and top borders, so that
fields look like a blank line rather than a text box*/
.inline-field input {border-style : solid;}
.inline-field .cf-field {border-style : solid;}
.inline-field input {border-top-width : 0px; border-left-width : 0px;}
.inline-field .cf-field {border-top-width : 0px; border-left-width : 0px;}
.inline-field input {border-right-width : 0px; border-bottom-width : 0px;}
.inline-field .cf-field {border-right-width : 0px; border-bottom-width : 0px;}

/*center align text in the field*/
.inline-field input {text-align : center;}
.inline-field .cf-field {text-align : center;}

I used this based on the example given from post:

http://answers.laserfiche.com/questions/113299/Single-line-Field-in-between-text#125218