CSS: Bir bağlantıdaki satır sonu nedeniyle oluşan fazladan beyaz alanı nasıl kaldırabilirim?

Question

Düzenleme 2: Zamanım kısaydı, bu yüzden dippas'ın arka plan yerine gerçek bir görüntü kullanma önerisini kullanacağım. Birisinin daha iyi bir çözümü olması durumunda bu soruyu açık tutuyorum. Tüm yardımlarınız için teşekkür ederim!

Orijinal Soru/Sorun:

Ben boşuna, şimdi bir saat için çözüm Googling edildi!

Bir siteyi yanıt vermek üzere biçimlendiriyorum ve arka plan görüntüsü içeren birkaç uzun bağlantı doğru şekilde kesilmiyor. float: sol, ekranını görüntüledim: blok, ekran: satır içi blok ve bunların hiçbiri çalışmaz. Düzeltmeye aldığım en yakın şey, ekrana: satırına ayarlanmasıdır, ancak arka plan görüntüsünü, son kelimenin hemen yanında değil de yan tarafa yerleştirmeyi tercih ederim.

Bu web sitesine kişisel olarak danışmanlık yapmak için ilk defa bu kişiyim (çözümlerimi daha önce birçok kez çıkmak için kullandım, bu yüzden teşekkür ederim!), Bu yüzden resim gönderemiyorum, ancak işte zor bir keman örneği (Düzenleme: burada yeni bir keman olduğundan diğeri tanımlanmış bir div genişliğini) vardı:

http://jsfiddle.net/2e28fanq/22/

(Ben ok ve "Eğitim")

CSS arasındaki bu ekstra boşluk kurtulmak istiyorum:Ben de

Register for a FREE Educational   > 
Webinar 

o JSFiddle olur Görüyorum:

Register for a FREE Educational > 
Webinar 

Ve ne yerine yapıyor: İşte

a { 
    display: block; 
    float: left; 
    width: auto; 
    font-size: 1.5em; 
    padding-right: 40px; 
    background: url('Arrow-Right.png') 100% 50% no-repeat; 
} 

yapmam gerek şeyin ham resmidir Benim kodumun geri kalanıyla ilgili bir şüphe var. Gizlilik/sözleşme nedenleriyle söz konusu siteye bağlantı kuramıyorum, ancak umarım birileri bana sağlayabileceğim şeyler konusunda yardımcı olabilir. Teşekkürler!

Answer 1

Bunu mu demek istediniz?

HTML

<div class="wrap"> 
    <a href="#">Register for a FREE Educational Webinar</a> 
</div> 

ve CSS

.wrap { 
    display:inline; 
    width:auto; 
    padding: 15px; 
    border: 1px solid #000; 
} 
a { 
    width: auto; 
    font-size: 1.5em; 
    padding-right: 40px; 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat; 
} 

See fiddle

Answer 2

Bir basit bir çözüm kullanmaktır word-break: break-all:

.wrap { 
 
    width: 425px; 
 
    padding: 15px; 
 
    border: 1px solid #000; 
 
} 
 

 
a { 
 
    display: block; 
 
    float: left; 
 
    width: auto; 
 
    font-size: 1.5em; 
 
    padding-right: 40px; 
 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat; 
 
    word-break: break-all; 
 
}

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar</a> 
 
    <div style="clear:both;"></div> 
 
</div>

fiddle

Bu da uzun bir metin için çalışır: ekstra alan hiçbir yerden gelen bir hata değildir Yani

.wrap { 
 
    width: 425px; 
 
    padding: 15px; 
 
    border: 1px solid #000; 
 
} 
 

 
a { 
 
    display: block; 
 
    float: left; 
 
    width: auto; 
 
    font-size: 1.5em; 
 
    padding-right: 40px; 
 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% 50% no-repeat; 
 
    word-break: break-all; 
 
}

<div class="wrap"> <a href="#">Register for a FREE Educational Webinar asdasd asd asd asda as Register for a FREE Educational Webinar asdasd asd asd asda as </a> 
 
    <div style="clear:both;"></div> 
 
</div>

fiddle example with long text

Answer 3

.

Basitçe arka plan konumunu 100% 50% olarak ayarladığınızdan, yani soldan% 100 ve üstten% 50 anlamına gelir. a'nuzun genişliği 425px olduğundan (ebeveynin genişliği 425px olduğundan ve çocuk display: block olduğundan, mevcut genişliğin% 100'ünü alır) ve okunuz sağ tarafa yapışıyor olduğundan, sağ tarafın arasında bir boşluk olacaktır. Resmin metni ve sol tarafı.

background-position-x değeri% 100 değilse veya üst öğenin genişliği 425px değilse, aşağıdaki iki örnekte gösterildiği gibi işler farklı olabilir.

• http://jsfiddle.net/2e28fanq/15/
• http://jsfiddle.net/2e28fanq/8/

Answer 4

Değişim padding: 15px; bağlantı noktasına. Sağ kenar boşluğu ekle: 40px;.

GÜNCELLEME: karşılaşılmasına değil

background-klip ...

.wrap { 
    width: 425px; 
    border: 1px solid #000; 
} 
a { 
    display: block; 
    float: left; 
    width: auto; 
    font-size: 1.5em; 
    padding: 15px; 
    margin-right: 40px; 
    padding-right: 40px; 
    background: url('https://cdn0.iconfinder.com/data/icons/Tabs_Color_Social/40/Arrow-Right.png') 100% center no-repeat; 
    background-clip: border-box; 
    word-wrap: break-word; 
} 

Bkz: http://jsfiddle.net/abrhmcc/75ybzLnz/3/

Test yapmak için sargı genişliğini değiştirin.

doldurma hakkı: 40px;metninden ve örtüsünden kaçınarak ok ve metin arasındaki mesafeyi azaltmak için bunu değiştirebilirsiniz.