Bir açılış sayfasında bulabileceğiniz satır içi blok öğeleri (div'ler) oluşturan bazı HTML ve CSS'ler var. Ancak, yalnızca div içinde bazı içerik (sıralanmamış bir liste) içerdiklerinde, doğru olarak dikey olarak hizalanmış gibi görünürler. Div içinde içerik yoksa, öğe aşağı itilir. İşte bir jsfiddle. İşte kod. Üçüncü div bloğunun neden dikey olarak hizalanmadığını açıklayan var mı?Inline-Block div öğeleri beklendiği gibi sıraya girmiyor
DÜZENLEME: "dikey-align: top" Bu mesele her div kullanmasını sağlamak için için "düzeltmek" diye rahatım ederken stil, hala neden olarak biraz şaşkınım Bu stilin ilk etapta kullanılması gerekiyor. Div elementlerinin, divların içindeki içeriğe bakılmaksızın, her zaman eşit olarak sıraya gireceğini düşünürdüm.
<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>
Teşekkürler, bu kolay bir çözümdü! Ancak, hala üçüncü blokun böyle hareket etmesine neden olan şey hakkında biraz kafam karışmış durumda. Neden "taban çizgisi" div'in iç içeriğinin alt kısmı gibi görünür ve divun kendisinin tabanı değil midir? – Ken
@Ken 3. div aslında başlangıçta, diğer 2 elementin iç iki çizgisi "pushes" divs 2 satır yukarı itiyor – koningdavid