एकाधिक कॉलम फॉर्म

Question

के लिए सीएसएस का उपयोग इस तरह के फॉर्म को करने का सबसे अच्छा तरीका है? http://i.imgur.com/vT7tC.png

मैं चौड़ाई के साथ तालिकाओं + इनपुट का उपयोग कर रहा हूं: 100%, मुझे पता है कि यह शायद (किसी भी कारण से इनपुट चौड़ाई: 100% [टीडी] या [div] से बड़ा हो जाता है (इस छवि पर लाल सीमा से [div] है [इनपुट ...] [/ div])

धन्यवाद

Answer 1

आप बाईं लेबल/आदानों छोड़ दिया और सही लेबल/इनपुट करने के लिए करने के लिए तैर सकते हैं दाएं।

आपको चौड़ाई निर्दिष्ट करने की आवश्यकता होगी अन्यथा आप अपने कॉलम के बीच एक बड़े अंतर के साथ समाप्त हो जाएंगे और आपका मध्य कॉलम डब्ल्यू आपके बड़े सही इनपुट के साथ।

यह कैसे मुझे लगता है कि प्रपत्र कोड होता है:

एचटीएमएल

<div class="content"> 
    <div class="row"> 
     <div class="lrow"> 
       <label>aaa aaa</label> 
       <input type="text" class="large"> 
     </div> 
     <div class="rrow"> 
       <label>bbb</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>ccc</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>ddd ddd</label> 
       <input type="text" class="large"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="lrow"> 
       <label>eee</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="rrow"> 
       <label>fff fff</label> 
       <input type="text" class="small"> 
     </div> 
     <div class="crow"> 
       <label>ggg</label> 
       <input type="text" class="small"> 
     </div> 
    </div> 
</div> 

सीएसएस

.content {width:542px;} 
.row {overflow:hidden;margin:5px 0;} 
.row label {float:left;text-align:right;width:60px;margin-right:5px;} 
.row input {float:left;} 
.lrow {float:left;} 
.rrow {float:right} 
.large {width:300px;} 
.small {width:100px;} 

Answer 2

हाथ से कॉलम बनाकर अपना समय बर्बाद नहीं है।

बस Blueprint CSS Framework का उपयोग करें। यह वास्तव में अच्छा और उपयोग करने में आसान है और जिस तरह से आप चाहते हैं नौकरी करता है।

सबसे महत्वपूर्ण बात यह है कि आपको अब ब्राउज़र अनुकूलता की परवाह करने की आवश्यकता नहीं है।