Estensione della lunghezza del bordo css

Come si espande la lunghezza di un bordo oltre la lunghezza del mio testo? Questo è quello che ho finora:Estensione della lunghezza del bordo css

color: #8C4600; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    font-size: 15px; 
    border-bottom: 1px solid #D1D1D1;

Questo è il codice HTML: <li class = "vendors">VENDORS</li>

fonte

2013-03-12 user12074577

Si prega di inviare il codice HTML che è in stile da questo css. – brbcoding

Puoi chiarire cosa intendi per "oltre la lunghezza del mio testo"? – zakangelle

Quello che voglio dire è che ho una riga di testo, quindi ho un bordo inferiore, una sorta di linea una sottolineatura e la linea del bordo arriva solo al mio testo, voglio che la lunghezza del bordo sia più lunga della lunghezza del mio testo – user12074577

I bordi CSS sono posizionati tra i margini e il riempimento di un elemento HTML. Se si desidera che i bordi di un elemento HTML estendano oltre la larghezza (o l'altezza) di quell'elemento, è possibile aggiungere il riempimento CSS all'elemento per spingere i bordi verso l'esterno.

Ad esempio, se il codice HTML è <li class=vendors">VENDORS</li>, aggiungere padding:0 10px; al proprio CSS spingere i bordi verso l'esterno a destra ea sinistra di 10px.

fonte

2013-03-12 21:10:58 ASGM

Yupp! questo è stato, grazie !! – user12074577

Felice di essere di aiuto! – ASGM

CSS

.inner { 
    width: 80%; 
} 

.outer { 
    border-bottom: 1px solid #D1D1D1; 
    color: #8C4600; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    font-size: 15px; 
}

HTML

<div class="outer"> 
    <p class="inner">Your text</p> 
</div>

avrete probabilmente bisogno di imposta la o larghezza ut Poiché potrebbe non essere scalato automaticamente in ogni browser. O basta rendere esterno il 120% e interno una larghezza fissa. Dovrebbe essere possibile in più approcci.

fonte

2013-03-12 20:54:48

È necessario specificare il bordo "": ## px color; in css.

Ciò creerà un bordo attorno al tag html correlato.

Un codice di esempio è:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p 
{ 
width:225px; 
border-style:solid; 
border:2px solid red; 
} 
</style> 
</head> 

<body> 
<p>This is some text in a paragraph.</p> 
</body> 
</html>

Per impostazione predefinita, senza la larghezza e border-style, al confine occuperà il 100% dello spazio. Puoi restringere la sua larghezza e il tuo stile in qualsiasi modo tu voglia.

Ecco a link Per un sito Web che ti aiuterà di più.

Speriamo che mi è stato utile

fonte

2013-03-12 21:10:44 Ali

Usa padding e margini negativi.

Es .:

div { 
    padding: 1em; 
    margin: 0 -1em; 
    border-bottom: 1px solid red; 
}

Quanto precede rende imbottitura su tutti i lati, e il margine 1em negativo a sinistra ea destra. Potresti voler armeggiare con quello.

fonte

2013-03-12 21:10:50

Estensione della lunghezza del bordo css

risposta

Problemi correlati