Bundan sonra satır kırılmasını önle </div>

Css ile bir div'den sonra satır kesilmesini önlemenin bir yolu var mı?

Örneğin bende var

<div class="label">My Label:</div>
<div class="text">My text</div>

ve şöyle görünmesini istiyorum:

Etiketim: Metnim

display:inline;

VEYA

float:left;

VEYA

display:inline-block; - Tüm tarayıcılarda çalışmayabilir.

divBurada a kullanmanın amacı nedir ? spanBir satır içi öğe olduğu için a öneririm , oysa diva blok düzeyinde bir öğedir.

Yukarıdaki her seçeneğin farklı çalışacağını unutmayın.

display:inline;dönecek divbir eşdeğer içine span. Bu etkilenmeyeceğini margin-top, margin-bottom, padding-top, padding-bottom, height, vb

float:left;divblok düzeyinde bir öğe olarak tutar . Hala bir blokmuş gibi yer kaplayacak, ancak genişlik içeriğe uyacak (varsayım width:auto;). clear:left;Belirli efektler için gerekli olabilir .

display:inline-block;"her iki dünyanın en iyisi" seçeneğidir. divBir blok elemanı olarak işlenir. O tümüne yanıt margin, paddingve heightbir blok elemanı için beklendiği gibi kurallar. Ancak, diğer öğelerin içine yerleştirilmesi amacıyla bir satır içi öğe olarak kabul edilir.

Daha fazla bilgi için bunu okuyun .

.label, .text {display: inline}

Bunu kullanırsanız, div'leri açıklık olarak da değiştirebilirsiniz.

DIV, varsayılan olarak bir BLOCK görüntüleme öğesidir, yani kendi satırında bulunur. CSS özelliğini display: inline eklerseniz, istediğiniz şekilde davranacaktır. Ama belki de bunun yerine bir SPAN düşünmelisiniz?

<span class="label">My Label:</span>
<span class="text">My text</span>

divElemanlar böylece varsayılan olarak onlar tam kullanılabilir genişliğini upp almak, blok unsurlardır.

Bunun bir yolu, bunları satır içi öğelere dönüştürmektir:

.label, .text { display: inline; }

Bu, spanöğeler yerine divöğeler kullanmakla aynı etkiye sahip olacaktır .

Başka bir yol da öğeleri yüzdürmektir:

.label, .text { float: left; }

Bu, öğelerin genişliğine nasıl karar verileceğini değiştirecek, böylece thwy yalnızca içerikleri kadar geniş olacaktır. Aynı zamanda, görüntülerin yan yana nasıl aktığına benzer şekilde, öğelerin yan yana yüzmesini sağlayacaktır.

Öğeleri değiştirmeyi de düşünebilirsiniz. divEleman belge bölümler için tasarlanmıştır, genellikle bir kullanımı labelve spanböyle bir yapı için eleman:

<label>My Label:</label>
<span>My text</span>

div'ler bir web sitesine yapı kazandırmak veya çok sayıda metin veya öğe içermesi için kullanılır, ancak bunları etiket olarak kullanıyorsunuz, span kullanmalısınız, her iki metni de otomatik olarak yan yana koyar ve yazmanıza gerek kalmaz. css kodu.

Ve başkaları size öğeleri kaydırmanızı söylese bile, en iyisi etiketleri değiştirmenizdir.

Bu versiyonu gördüğümü sanmıyorum:

<div class="label">My Label:<span class="text">My text</span></div>

<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

clear:noneEtikete css özelliğini uygulamayı deneyin .

.label {
     clear:none;
}

div'lerinizi css'de yüzdürmeyi deneyin

.label {
float:left;
width:200px;
}
.text {
float:left;
}

Float css niteliği ve width css niteliği ile oynayarak, div'leri onlardan sonra satır sonu olmadan almayı birçok kez başardım.
Elbette çözümü çalıştıktan sonra tüm tarayıcılarda test etmeniz ve her tarayıcıda her koşulda çalıştığından emin olmak için pencereleri yeniden boyutlandırmanız gerekir.

bu kodu normal div için kullanın display: inline;

Tabloda tablodan display: inline-table; daha iyi kullanırsanız bu kodu kullanın

metinlerde CSSsatır sonlarını önlemek için bunu (in ) deneyin div:

white-space: nowrap;