开发者

CSS forms instead of tables 2011

开发者 https://www.devze.com 2023-02-02 21:54 出处:网络
I gave up on using CSS for form styling when I hit snags like requiring 3 textboxes adjacent to one another (like a phone number) or a dropdown list next to a开发者_Python百科 textbox. I just couldn\'

I gave up on using CSS for form styling when I hit snags like requiring 3 textboxes adjacent to one another (like a phone number) or a dropdown list next to a开发者_Python百科 textbox. I just couldn't come up with a reliable way to style it without good ol' TABLES.

I'm thinking about going back to CSS for form styling; I don't know:

  1. Whether it's more usable to have captions on top or on the left of the field.
  2. How to style the things so they place nicely even with a couple of adjacent form elements.

References? Is this still a pipe dream?


You mean like this?

CSS forms instead of tables 2011

Basically we create a pseudotable

.mxrow {
clear: both;
width: 100%;
height: 50px;
}


.mxcell {
float: left;
padding-top: 10px;
padding-bottom: 10px;
height: 26px;
}

.mxcell_firstcell{
width: 25%;
}

And the markup would be

<div class = "mxrow">
  <div class = "mxcell mxcell_firstcell"><input element /></div>
  <div class = "mxcell mxcell_secondcell"><another form element/></div>
</div>

The individual cell classnames serve to apply specific css (my markup is a grid)


There are a couple of CSS templates designed specifically for laying out forms.

  • vessess.com
  • Uni-form

I hope this helps point you in a productive and awesome direction. Take care.


No, it is very possible, and I (and many others) have been doing it for years.

Look at float: (left|right) and display: (inline|inline-block).


Other people give you some valid suggestions... if you still have problems you can try a form css framework like formee... http://www.formee.org/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号