Voglio fare una linea di 1 px dal lato sinistro dello schermo fino alla fine di un centro div
. Il div
è centrato con margin: auto;
.Linea dal lato sinistro dello schermo al div centro terminale
Questa immagine mostra come dovrebbe apparire:
Voglio fare una linea di 1 px dal lato sinistro dello schermo fino alla fine di un centro div
. Il div
è centrato con margin: auto;
.Linea dal lato sinistro dello schermo al div centro terminale
Questa immagine mostra come dovrebbe apparire:
lui RE è un'altra soluzione ed è cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
Puoi vedere come funziona se cambi 'top: -5px' in' top: 5px'. La linea blu è composta da due linee sovrapposte: una linea dal bordo sinistro della finestra al centro e una linea dal bordo sinistro del div al bordo destro. –
Ingrandisci lo schermo e si rompe, preferirei la soluzione di @ Vucko, ma ancora una volta, il supporto è rischioso .. –
funziona ed è una soluzione molto utile – Hushme
Ecco un esempio utilizzando calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
è possibile farlo senza calc? – rafal235
Dovrai calcolare la larghezza in qualche modo così senza usare calc. Dubito che sia possibile (per una pura soluzione ** CSS **). Ma se è possibile utilizzare JavaScript, è possibile calcolare facilmente la larghezza. – Vucko
In realtà una soluzione CSS pura si è rivelata piuttosto semplice, controlla la mia risposta –
Non sono sicuro se questo funziona in tutti i browser, ma credo hr
occupa tutto lo spazio che fornisci con. Pertanto puoi dargli un ampio margine sinistro negativo e metterlo all'interno del div centrato. Invece di un elemento hr, potresti usare anche un div vuoto, che potrebbe essere o meno facile da usare. È possibile impostare lo stile border-top
di tale divisione su un intervallo più ampio di tipi di bordo (punteggiato ad esempio).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
Con i CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
Che ne dite di questa soluzione? nessuna marcatura supplementare necessario, cross browser e non dipende dalla larghezza dell'elemento
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
quando la pagina viene ingrandita in cromo la sua rottura – Hushme
questo perché la linea è alta 1px, se hai bisogno di supportare tutti i livelli di zoom, ti suggerisco di impostare l'altezza almeno a 2px –
sì, ti ho detto che tutto il metodo è buono e mi piace davvero che le persone pubblichino qui stanno dando una soluzione multipla lo stesso problema – Hushme
È possibile utilizzare un tag
ma si avrebbe bisogno di conoscere la lunghezza del div/dove fermate. – andrewb
condividi il tuo jsfiddle –
Puoi fornire un http://jsfiddle.net/ con il tuo markup? –