CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede pmnielsen Novice
10. september 2011 - 21:16 Der er 10 kommentarer og
1 løsning

html form input.

Har en side med en form til fornavn, mellemnavn o.s.v
har er et udpluk:

<label for='fornavn'>Fornavn :</label><input type='text' name='fornavn' id='fornavn' /><br />
<label for='mellemnavn'>Mellemnavn :</label><input type='text' name='mellemnavn' id='mellemnavn' /><br />

Hvordan får jeg de 2 input bokse til at stå under hinanden?

hvis jeg kunne lave en "<label for='mellemnavn' style='width:50px;'> og det samme med fornavn ville det være løst, man det kan man ikke.
Avatar billede Slettet bruger
10. september 2011 - 21:25 #1
Prøv at tilføje "display:inline-block;" til din style attribut.
Avatar billede Slettet bruger
10. september 2011 - 21:27 #2
Og 50px er nok for lidt til dine labels. Den får et linebreak med den font-størrelse min browser bruger.
Avatar billede pmnielsen Novice
10. september 2011 - 21:29 #3
Jeg viste bare det var en lille dum ting jeg ikke have tænkt på.
mange tak.... smid et svar
Avatar billede pmnielsen Novice
10. september 2011 - 21:30 #4
havde også prøve med over 50px... men "display:inline-block;" virker
Avatar billede Slettet bruger
10. september 2011 - 21:35 #5
Fint nok. Pointene beholder du bare selv. :)
Avatar billede pmnielsen Novice
10. september 2011 - 21:37 #6
tak for hurtig hjælp
Avatar billede olebole Juniormester
10. september 2011 - 22:02 #7
<ole>

Du kan også bruge float eller position:


<style type="text/css">
label {
    position: relative;
    display: block;
    width: 250px;
    padding: 2px 0;
    margin: 5px 0;
}
input {
    position: absolute;
    right: 0;
    top: 0;
}
</style>

<label for='fornavn'>Fornavn :<input type='text' name='fornavn' id='fornavn'></label>
<label for='mellemnavn'>Mellemnavn :<input type='text' name='mellemnavn' id='mellemnavn'></label>


/mvh
</bole>
Avatar billede pmnielsen Novice
11. september 2011 - 13:57 #8
Tak Ole.
Kan ikke helt finde ud af hvad der er smartes... i din eksempel kan width selvfølgelig ændres et sted, for alle felterne.
Avatar billede olebole Juniormester
11. september 2011 - 15:31 #9
Selvtak. Der er ikke nogen af fremgansmåderne, der er 'den rigtige' eller bedre end den anden. Det er bare to forskellige måder at gøre det på. At få vist alternative fremgangsmåder giver ofte dybere forståelse  =)

Du kunne sagtens opnå ét sted at opdatere ved at bruge en klasse:


<style type="text/css">
.label {
    display: inline-block;
    width: 80px;
}
</style>

<label for='fornavn' class='label'>Fornavn :</label><input type='text' name='fornavn' id='fornavn'><br>
<label for='mellemnavn' class='label'>Mellemnavn :</label><input type='text' name='mellemnavn' id='mellemnavn'><br>

Avatar billede olebole Juniormester
11. september 2011 - 15:35 #10
- og du kunne såmænd også skrive:


<style type="text/css">
.myShit label {
    display: inline-block;
    width: 80px;
}
</style>

<div class="myShit">
    <label for='fornavn'>Fornavn :</label><input type='text' name='fornavn' id='fornavn'><br>
    <label for='mellemnavn'>Mellemnavn :</label><input type='text' name='mellemnavn' id='mellemnavn'>
</div>


Selectoren .myShit label betyder: "Denne CSS-regel gælder for alle label elementer, som ligger under et element med klassen 'myShit'"
Avatar billede olebole Juniormester
11. september 2011 - 15:39 #11
De to sidste fremgangsmåde gør, at du kun 'rammer' de label elementer, du selv vælger at 'ramme'.

I det første tilfælde alle elementer med klassen label - og i andet tilfælde de label elementer, der ligger under en bestemt klasse  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 08:02 Skjul kolonne ud fra værdi i celle Af vango6 i Excel
I går 22:06 Sophus Scan og Clean på USB- samler den "snavs" op? Af Uvanga i Andet sikkerhed
I går 17:53 Slukke for skærmbillede når musikken spiller Af AnneB i Fjernsyn & projektorer
I går 15:25 MaxHvis Af sgl i Excel
23/0916:05 Log ind problem på WordPres side Af Prevo i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Statens it-styrelser vokser kraftigt: Så mange flere medarbejdere har de fået på blot to år - mens Datatilsynet skrumper
Læs mere »
Et ubehageligt opkald fik danske Thomas Eriksson til at udvikle en helt ny teknologi: "Nogen havde delt intime billeder af hende"
Produktionsstop fortsætter: JLR bløder millioner hver dag efter hackerangreb
Ny stor aftale rykker SAP-systemer over på AWS’ nye europæiske cloudløsning
Se alle »
Computerworld
Teaser billede
Amigaen er tilbage – nu er den 400 gange hurtigere end tidligere
Læs mere »
Droneangreb over Københavns Lufthavn viser, hvor sårbare vi egentlig er: Det er kun begyndelsen
Test: Garmins tyndeste smartur kan give Apple Watch kamp til stregen
Nørgaard: Det er ingen tilfældighed at CVR-nummeret til mit nye firma, Mogens.ai, er 42258687 - det er et signal
Se alle »
CIO
Teaser billede
Microsoft-topchef Satya Nadella er "hjemsøgt" af frygten for, at AI bliver Microsofts død
Læs mere »
It-chefer forventer, at der vil være langt færre it-jobs om få år: It-afdelingerne vil skrumpe med en femtedel
Tidligere Ecco-CIO Ulrik Balling Hansen lander internationalt topjob
Nyder godt af kæmpe blodbad i Broadcoms netværk af VMware-partnere
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Henrik Bodskov fratræder som topchef for Aeven: Her er den nye topchef
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Læs mere »
Revolutionér kundeoplevelsen med AI og automatisering
Sikre og skalerbare datacentre med fokus på drift, energi og fremtid
Få automatisk styr på alle virksomhedens persondata
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »