开发者

Pure CSS form styling with columns?

开发者 https://www.devze.com 2022-12-20 14:30 出处：网络
I have a form that I need styled to have 2, 4, and 6 columns. I named my classes col2, col4, and col6 respectively. I am having a lot of trouble especially with vertical alignment and the columns them
相关专题：cssforms

I have a form that I need styled to have 2, 4, and 6 columns. I named my classes col2, col4, and col6 respectively. I am having a lot of trouble especially with vertical alignment and the columns themselves. Can anyone help with this?


<div id="fieldset1" class="col2">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="SingleForm122" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="SingleForm123" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="SingleForm124" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="SingleForm125" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="SingleForm126" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="SingleForm127" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="SingleForm128" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="SingleForm129" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="SingleForm130" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="SingleForm131" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="SingleForm132" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="SingleForm133" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>
<div id="fieldset2" class="col4">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="Text1" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="Text2" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="Text3" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="Text4" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="Text5" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="Text6" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="Text7" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="Text8" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="Text9" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" i开发者_运维百科d="Text10" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="Text11" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="Text12" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" type="text" id="Text13" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" type="text" id="Text14" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" type="text" id="Text15" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" type="text" id="Text16" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>
<div id="fieldset3" class="col6">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" type="text" id="Text25" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" type="text" id="Text26" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" type="text" id="Text27" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" type="text" id="Text28" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" type="text" id="Text29" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" type="text" id="Text30" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" type="text" id="Text31" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" type="text" id="Text32" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" type="text" id="Text33" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" type="text" id="Text34" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" type="text" id="Text35" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" type="text" id="Text36" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" type="text" id="Text37" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" type="text" id="Text38" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" type="text" id="Text39" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" type="text" id="Text40" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm138">Music Cabinet</label>
                <input name="SingleForm138" type="text" id="Text41" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm139">Rug, Large Roll</label>
                <input name="SingleForm139" type="text" id="Text42" class="inputText" />
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm140">Rug, Small Roll</label>
                <input name="SingleForm140" type="text" id="Text43" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm141">Sofa, 2 Cushions</label>
                <input name="SingleForm141" type="text" id="Text44" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm142">Sofa, 3 Cushions</label>
                <input name="SingleForm142" type="text" id="Text45" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm143">Sofa, 4 Cushions</label>
                <input name="SingleForm143" type="text" id="Text46" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm144">Sofa, Sectional</label>
                <input name="SingleForm144" type="text" id="Text47" class="inputText" />
            </div>
            <div class="rowItem">
                <label for="SingleForm145">Table, Coffee, End or Night</label>
                <input name="SingleForm145" type="text" id="Text48" class="inputText" />
            </div>
        </div>
    </fieldset>
</div>
<div style="clear: both;">
</div>

Why not just use tables? You have laid everything out like tables (rowContainer = tr, rowItem = td). All you need to do is change the div tags into table, tr and td tags.

Tables aren't evil, not if you want to display stuff in a tabular fashion. If tables are the easiest way to align things the way you want, then use tables.

I had similar issues too. I ended up using Blueprint CSS (or alternatively 960.gs) which simplifies creation of column based layouts greatly.

I personally use tables for virtually all forms, small and large. It's just so much easier to format and you get away with so much less code.

I recommend you use tables and solve your problems.

Not sure I understand what you're after, but if you're after a three columns layout with aligned borders, particularly the bottom one, and you have an unbalanced content, you can wrap your columns in a div (colWrapper), get rid of the div clearing on both sides, and remove the border applied to your fieldsets. By applying a overflow:hidden to the wrapper, then forcing a long margin (-3000px) in one way, and a long padding (3000px) to the columns, you can then apply the border to your columns and get the desired effect. It is also known as the "holy grail".

.col2,.col4,.col6{float:left;}
div > fieldset{border:none;}
#colWrapper{overflow:hidden;border-bottom:1px solid black;}
#colWrapper > div {border:1px solid; margin-bottom:-3000px;padding-bottom:3000px;}
.col2,.col4{border-right:none;}

Your HTML would be like:

<div id="colWrapper"><div id="fieldset1" class="col2">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="SingleForm122" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="SingleForm123" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="SingleForm124" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="SingleForm125" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="SingleForm126" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="SingleForm127" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="SingleForm128" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="SingleForm129" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="SingleForm130" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="SingleForm131" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="SingleForm132" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="SingleForm133" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>

<div id="fieldset2" class="col4">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="Text1" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="Text2" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="Text3" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="Text4" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="Text5" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="Text6" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="Text7" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="Text8" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="Text9" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="Text10" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="Text11" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="Text12" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" id="Text13" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" id="Text14" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" id="Text15" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" id="Text16" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>

<div id="fieldset3" class="col6">
    <fieldset>
        <legend>Living Room </legend>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm122">Bar, Portable</label>
                <input name="SingleForm122" id="Text25" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm123">Bookcase</label>
                <input name="SingleForm123" id="Text26" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm124">Bookshelves, Sectional</label>
                <input name="SingleForm124" id="Text27" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm125">Cabinet, Curio</label>
                <input name="SingleForm125" id="Text28" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm126">Chair, Arm</label>
                <input name="SingleForm126" id="Text29" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm127">Chair, Occasional</label>
                <input name="SingleForm127" id="Text30" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm128">Chair, Overstuffed</label>
                <input name="SingleForm128" id="Text31" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm129">Chair, Rocker</label>
                <input name="SingleForm129" id="Text32" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm130">Chair, Straight</label>
                <input name="SingleForm130" id="Text33" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm131">Clock, Grandfather</label>
                <input name="SingleForm131" id="Text34" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm132">Day Bed</label>
                <input name="SingleForm132" id="Text35" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm133">Desk, Small</label>
                <input name="SingleForm133" id="Text36" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm134">Desk, Secretary</label>
                <input name="SingleForm134" id="Text37" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm135">Foot Stool</label>
                <input name="SingleForm135" id="Text38" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm136">Hide-a-bed or Studio Couch</label>
                <input name="SingleForm136" id="Text39" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm137">Lamp, Floor or Pole</label>
                <input name="SingleForm137" id="Text40" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm138">Music Cabinet</label>
                <input name="SingleForm138" id="Text41" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm139">Rug, Large Roll</label>
                <input name="SingleForm139" id="Text42" class="inputText" type="text">
            </div>
        </div>
        <div class="rowContainer">
            <div class="rowItem">
                <label for="SingleForm140">Rug, Small Roll</label>
                <input name="SingleForm140" id="Text43" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm141">Sofa, 2 Cushions</label>
                <input name="SingleForm141" id="Text44" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm142">Sofa, 3 Cushions</label>
                <input name="SingleForm142" id="Text45" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm143">Sofa, 4 Cushions</label>
                <input name="SingleForm143" id="Text46" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm144">Sofa, Sectional</label>
                <input name="SingleForm144" id="Text47" class="inputText" type="text">
            </div>
            <div class="rowItem">
                <label for="SingleForm145">Table, Coffee, End or Night</label>
                <input name="SingleForm145" id="Text48" class="inputText" type="text">
            </div>
        </div>
    </fieldset>
</div>
</div>

EDIT:

I think I better undertsand your issue, and it is much simpler than what I thought initially

Try these css :

<style charset="utf-8" type="text/css">

.rowItem{float:left;}
.col2 .rowItem{width:49.9%;}
.col4 .rowItem{width:24.9%;}
.col6 .rowItem{width:16.66%;}
.rowItem label {font-size:8px;text-align:right;}
.rowItem label, .rowItem input{float:left;display:block;width:49.9%;margin-bottom:12px;}
</style>
0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9