के उपलब्ध क्षैतिज स्थान को भरने के लिए इनलाइन तत्व खिंचाव उदाहरण के लिए मेरे पास 200px div में तीन बटन हैं, पाठ केवल न्यूनतम है इसलिए बटन क्षैतिज स्थान को भर नहीं पाते हैं। क्या यह संभव है ..सीएसएस: कंटेनर
शेष शेष स्थान पर कब्जा करने के लिए आखिरी बटन खिंचाव बनाएं?
शेष दो बटन को धक्का देने वाली शेष जगह को भरने के लिए खींचने वाला पहला बटन?
अंतिम बटन को अंतिम बटन को धक्का देने के लिए शेष स्थान को भरने के लिए बीच बटन?
तुम सिर्फ इसलिए की तरह चौड़ाई सेट नहीं कर सकता ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css button stretch</title>
<style>
#btn_container
{
width: 200px;
}
#btn_container button
{
width: 20%;
}
#btn_container button.stretch
{
width: 58%;
}
</style>
</head>
<body>
<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>
यह वांछित प्रभाव प्राप्त करने के लिए लगता है, तरल पदार्थ (है अगर div बटन कंटेनर की चौड़ाई बदल गया है या एक के लिए सेट है %), और आईई, फ़ायरफ़ॉक्स और ओपेरा में काम करता है।
संपादित करें: अनावश्यक बीटीएन कक्षा को हटा दिया गया; खिंचाव वर्ग के लिए चौड़ाई% टक्कर लगी; डॉक्ट टाइप जोड़ा गया। प्रकारों को छोड़ दिया, तकनीकी रूप से केवल एक उदाहरण के लिए हटा दिया जा सकता है, लेकिन मेह।
@ आरपीएफएलओ: प्रकार वहां हैं क्योंकि इस उदाहरण में मेरे बटन बटन सबमिट नहीं कर रहे हैं। अगर ये एक फॉर्म का हिस्सा थे और सबमिट कर रहे थे, तो डिफ़ॉल्ट रूप से टाइप = सबमिट करने के बाद से मैं उन्हें छोड़ देता। (W3C HTML BUTTON)
रॉबर्ट्स के समान:
एचटीएमएल
<div id="container">
<button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>
सीएसएस
div#container {
border: solid 1px;
width: 200px;
}
div#container button {
width: 33%;
}
div#container button:last-child {
width: 34%;
}
यह एक तरल पदार्थ लेआउट के लिए अनुमति नहीं देता: #container चौड़ाई होना चाहिए ज्ञात है, तो आप गणित करते हैं।
एक द्रव लेआउट आप निरपेक्ष स्थिति की दुनिया में कूद करने की जरूरत है के लिए अनुमति देने के लिए:
div#container {
border: solid 1px;
width: 50%; /* resize your browser window to see results */
position: relative;
}
div#container button {
position: absolute;
width: 50px;
}
button#one {
top: 0;
left: 0;
}
button#two {
top: 0;
left: 55px;
}
button#three {
width: auto !important; /* get rid of the 50px width defined earlier */
top: 0;
left: 110px;
right: 0px;
}
#container की ऊंचाई से सावधान रहें। यह इसलिए चला गया है क्योंकि इस उदाहरण में उसके सभी बच्चे पूरी तरह से स्थित हैं - आप सीमा से देख सकते हैं।
यह उदाहरण फ़ायरफ़ॉक्स में मेरे लिए काम करने के लिए नहीं लगता है, किसी अन्य ब्राउज़र नहीं आज़माए। – ChrisInCambo
यह सही है, फ़ायरफ़ॉक्स एक छोटे से अजीब डब्ल्यू/पूरी तरह से तैनात इनपुट तत्वों हो जाता है। अभी कोई समय नहीं है, लेकिन मुझे पता है कि मैंने इसे अतीत में तय कर लिया है। –
मुझे एहसास हुआ है कि वास्तविक समस्या बटन तब तक नहीं फैलेगा जब तक कि आप उन्हें स्पष्ट चौड़ाई नहीं देते (यानी चौड़ाई: 100%)। आपको अभी भी तालिका-कोशिकाओं की आवश्यकता है, हालांकि 100% को 'फिट क्या होगा' मॉडल को बाधित करने के लिए। आप बस प्रत्येक बटन पर 33% सेट कर सकते हैं लेकिन यदि आपके बटन गतिशील रूप से जोड़े जा रहे हैं (तब तक जब आप सर्वर पर प्रतिशत की गणना नहीं करते हैं) तो यह काम नहीं करेगा।
METHOD 1 (काम नहीं करता है): बटन पंक्ति में फिट करने के लिए विस्तार नहीं करते हैं (यानी, प्रदर्शन: तालिका-कक्ष को अनदेखा किया जाता है)।
<div style="display:table;width:200px">
<div style="display:table-row">
<button style="display:table-cell">1</button>
<button style="display:table-cell">2</button>
<button style="display:table-cell">3</button>
</div>
</div>
IE के लिए पहले IE8 करने के लिए आप एक असली मेज या IE8-js की तरह एक संगतता स्क्रिप्ट को खिलाने के लिए की आवश्यकता होगी।मूल अवधारणा हालांकि आसान पर्याप्त है:
<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
if el.style.find('display:table-cell') {
el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
}
}
</script>
<![endif]-->
विधि 2 (काम): हममम .. खैर जो भी कारण प्रदर्शन के लिए: तालिका सेल शैली बटन तत्वों पर काम नहीं करता। हालांकि मैं कुछ अतिरिक्त मार्कअप के साथ ऐसा करने में सक्षम था।
<div style="display:table;width:500px;">
<div style="display:table-row">
<div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
<div style="display:table-cell"> <button style="width:100%">2</button> </div>
<div style="display:table-cell"> <button style="width:100%">3</button> </div>
</div>
</div>
मैं मानता हूं कि यह सुंदर नहीं है लेकिन यह सुनिश्चित करेगा कि सभी क्षैतिज स्थान भर जाएंगे। यह वर्गों का उपयोग की तरह this demo में मैं एक साथ रखा द्वारा एक सा साफ किया जा सकता। फिर भी, जब आईई की कमियों के साथ मिलकर यह संभवतः एक मामला है जहां मैं कहता हूं कि शुद्धियों को अनदेखा करें और केवल एक टेबल का उपयोग करें:
<style>table button {width:100%}</style>
<table style="width:500px;">
<tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
हाय SpilFF, धन्यवाद उत्तर के लिए यह निश्चित समाधान के प्रकार मैं हालांकि दुर्भाग्य से यह मेरे लिए काम नहीं कर रहा है, बटन खींच नहीं कर रहे हैं के लिए देख रहा था (Firefox में करने की कोशिश की है)। मैंने यह भी देखा कि टेबल-पंक्ति div को बंद करने के लिए बंद नहीं किया गया था, लेकिन कोई खुशी नहीं थी। – ChrisInCambo
सभी वर्गों और प्रकारों के साथ क्या है? –
आप सही है कि मैं क्या सोच रहा था कर रहे हैं। मैं इसे साफ करने के लिए संपादित कर दूंगा। –