# How do I style multi-choice fields to display as row (horizontal) rather than vertical?

**URL:** <https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125>\
**Category:** Get Answers\
**Created:** [September 23, 2016, 8:49am UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125 "2016-09-23T08:49:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![StuartMack58917](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@StuartMack58917](https://forums.knack.com/u/StuartMack58917)\
**Post date:** [September 23, 2016, 8:49am UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125/1 "2016-09-23T08:49:22Z")

</div>

Hi,

I would really like to be able to display multiple choice options in a horizontal row rather than their default of &nbsp;vertical.&nbsp;

For example:

Please select your toppings:

&nbsp;X Bacon X Lettuce X Tomato X Onion X Cheese

rather than:

Please select your toppings:

X Bacon

X Lettuce

X Tomato

X Onion&nbsp;

X Cheese

As you can see the first option requires two lines of real estate where as the bottom requires six. This helps keep the page looking cleaner and everything above the fold (So you don't have to scroll down).&nbsp;

Would be great to have a custom style that runs only runs on included fields. &nbsp;

had a dig through the forums but couldn't see an answer to this.&nbsp;

Seem like it would have popped up before so I apologise if I didn't see it.

Regards

Stu

---

<div class="post-metadata">

**Author:** ![JeffHedric11485](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@JeffHedric11485](https://forums.knack.com/u/JeffHedric11485)\
**Post date:** [April 23, 2019, 1:39am UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125/2 "2019-04-23T01:39:58Z")

</div>

I am having the same issue.&nbsp; I would like to display multiple choice options in a horizontal row rather than their default value of &nbsp;vertical.&nbsp; &nbsp;

&nbsp;

Where do place the below CSS code using the Knack interface?&nbsp; I placed the below CSS code in the custom CSS section of the site, but it didn't change the multiple choice option orientation to horizontal.&nbsp;

```
.kn-input-multiple_choice label.option {float: left;}
```

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [September 26, 2016, 11:00pm UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125/3 "2016-09-26T23:00:07Z")

</div>

Stu - good work and looks good to me.&nbsp; Here's some help with CSS padding [http://www.w3schools.com/css/css\_padding.asp](http://www.w3schools.com/css/css_padding.asp)

---

<div class="post-metadata">

**Author:** ![StuartMack58917](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@StuartMack58917](https://forums.knack.com/u/StuartMack58917)\
**Post date:** [September 26, 2016, 10:52am UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125/4 "2016-09-26T10:52:21Z")

</div>

Thanks for the response.

This works well.&nbsp;

To extend on this I have been experimenting on how to call this on a field and not a class and have had success with the below. Do you see any problems with this other than adding padding (ill work out how to do that tomorrow).

```
#kn-input-field_41 label.option {float: left;}
```

  

Any help really appreciated.

Thanks again

stu

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [September 24, 2016, 11:16pm UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125/5 "2016-09-24T23:16:26Z")

</div>

Stu - without testing the CSS might be something like this:

```
.kn-input-multiple_choice label.option {float: left;}
```

&nbsp;Might need some padding around each label.option.

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [September 24, 2016, 11:16pm UTC](https://forums.knack.com/t/how-do-i-style-multi-choice-fields-to-display-as-row-horizontal-rather-than-vertical/10125/6 "2016-09-24T23:16:15Z")

</div>

Stu - without testing the CSS might be something like this:

```
.kn-input-multiple_choice label.option {float: left;}
```

&nbsp;Might need some padding around each label.option.