के रूप में लाइन नहीं करते हैं मेरे पास कुछ HTML और CSS है जो इनलाइन ब्लॉक तत्व (divs) बनाता है जो किसी को लैंडिंग पृष्ठ पर मिल सकता है। हालांकि, जब वे divs के अंदर कुछ सामग्री (एक अनियमित सूची) होते हैं, तो वे केवल लंबवत रूप से गठबंधन होते हैं। यदि div में कोई सामग्री नहीं है, तो तत्व धक्का दिया जाता है। यहां एक jsfiddle है। कोड यहाँ है। क्या कोई समझा सकता है कि तीसरा div ब्लॉक लंबवत रूप से गठबंधन क्यों नहीं है?इनलाइन-ब्लॉक div तत्व अपेक्षित
संपादित: "ऊर्ध्वाधर- align: शीर्ष" जब मैं आरामदायक है कि "ठीक" करने के लिए इस मुद्दे को सुनिश्चित करने के लिए कि प्रत्येक div का उपयोग करता है हूँ स्टाइल में, मैं अभी भी क्यों के रूप में एक छोटे से हैरान हूँ मुझे इस स्टाइल को पहली जगह उपयोग करने की आवश्यकता है। मुझे लगता है कि divs के अंदर सामग्री के बावजूद div तत्व हमेशा समान रूप से लाइन करेंगे।
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.header {
padding: 10px;
background-color: red;
border-bottom: 1px solid #aaaaaa;
color: #ffffff;
}
a:hover {
text-decoration:underline;
}
h1 > a {
color: #ffffff;
}
h1 > a:hover {
color:#ffffff;
}
li > a {
color: #000000;
}
li > a:hover {
color: #000000;
}
</style>
</head>
<body>
<div>
<div class='landing-block'>
<h1 style='background-color: #3991db;'>
<a href='#'>COMPANIES</a>
</h1>
<ul>
<li><a href='#'>Search Companies</a></li>
<li><a href='#'>New Company</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #9139db;'>
<a href='#'>PEOPLE</a>
</h1>
<ul>
<li><a href='#'>Search People</a></li>
<li><a href='#'>New Person</a></li>
<ul>
</div>
<div class='landing-block'>
<h1 style='background-color: #c2db39;'>
<a href='#'>Products</a>
</h1>
</div>
<div>
</body>
</html>
धन्यवाद, यह एक आसान फिक्स था! हालांकि, मैं अभी भी थोड़ा उलझन में हूं कि वास्तव में तीसरे ब्लॉक को इस तरह से नीचे जाने का कारण क्या है। "आधार रेखा" div की आंतरिक सामग्री के नीचे क्यों दिखाई देती है, न कि div के नीचे? – Ken
@Ken 3 div आधार रेखा पर वास्तव में है, अन्य 2 तत्वों पर भीतरी दो लाइनें – koningdavid