html5, css, programowanie

Question

Witam.

Mam pewien problem, otóż w żaden znany mi sposób nie mogę ustawić odległości okien od lewej krawędzi o konkretną wartość. Przy wykorzystaniu znacznika div (padding-left:75px) okno od płci, wagi czy wzrostu przesuwa się w sposób jaki chce aczkolwiek przenosi się do kolejnej linii (div automatycznie przechodzi do nowej linii jak br). Czy jest ktoś mi w stanie powiedzieć co powiniem zrobić?

 

 

<form name="bmiForm" method="post">
            <h2 style="color:black; text-align:center; ">Przelicznik BMI</h2>
            <fieldset>
                <legend>Oblicz swój wskaznik BMI</legend>
                <label>Płeć:</label>
                <select>
                    <option>Kobieta</option>
                    <option>Mężczyzna</option>
                </select><br />
                Waga [kg]: <input type="number" name="weight" min="0" max="120" step="1"/><br />
                Wzrost [cm]: <input type="number" name="height" min="0" max="220" step="1" /><br />
                <input type="button" value="Oblicz BMI" onClick="Bmi()">
                <input type="reset" value="Czyść" />
                <br />
                Wskaznik BMI: <input type="text" name="bmi" size="10"><br />
                Twój wskaznik: <input type="text" name="meaning" size="25"><br />
                <h3 style="color:black; text-align:center; ">Zakresy wartości BMI:</h3>
                <div class="wartosci">
                    mniej niż 16 - wygłodzenie <br />
                    16 - 16.99 - wychudzenie <br />
                    17 - 18.49 - niedowaga <br />
                    18.5 - 24.99 - wartość prawidłowa <br />
                    25 - 29.99 - nadwaga <br />
                    30 - 34.99 - I stopień otyłości <br />
                    35 - 39.99 - II stopień otyłości <br />
                    powyżej 40 - otyłość skrajna <br />
                </div>
            </fieldset>

 

Comments

Zdaje się, że zapomniałeś dodać jeszcze kod CSS.

---

margin-left ?

---

Przy wykorzystaniu margin-left faktycznie okna przesuwają się, ale muszą być one krawędziami równo pod sobą.

 

fotka po przesunięciu

kod z css

/*całość strony*/

body {
    width: 1024px;
    height: 980px;
    margin: auto;
}
    /*prawa strona*/
    nav, article, aside {
    display: block;
    float: left;
    
}
/*menu*/
nav {
    width: 198px;
    height: 800px;
    text-align: center;
    padding: 3px;
    border: 2px solid black;
    background: linear-gradient(to top left, gray 15%, yellow 99%);
}
/*artykuł*/
article {
    width: 590px;
    height: 800px;
    border: 2px solid #000000;
    overflow: auto;
    padding: 3px;
    background: linear-gradient(to top, gray 35%, yellow);
}
/*nagłówek*/
body >
header {
    width: 1004px;
    height: 100px;
    background-color: ActiveCaption;
    text-align: center;
    border: 2px solid black;
    background-image:url(naglowek_2.jpg);
    font-size:medium;
    font-family:Arial;
    
}/*prawa*/
aside {
    width: 190px;
    height: 800px;
    border: 2px solid black;
    background: linear-gradient(to top right, gray 15%, yellow 99%);
    padding: 3px;
    border: 2px solid black;
   
}
iframe {
    width: 100%;
    height: 100%;
    border: none;
    
}
/*stopka*/
#main_footer {
    overflow: auto;
    height: 115px;
    width: 1004px;
    float: left;
    border: 2px solid black;
    background: linear-gradient(to top, black 1%, gray 35%)
}

 

---

podziel to na dwa divy i wtedy diva będziesz mógł odsunąć za pomocą margin-left i będziesz miał wyrównanie do krawędzi

---

albo zamknij całość w div i dorównaj inputy do prawej krawędzi

Answer 1

Być może to co napisze nie będzie najlepszym rozwiązaniem ale ja bym zamknął każdy opis inputa oraz input w jednym divie, następnie podzieliłbym go w środku na dwa mniejsze i tak z każdą linijką, tzn.

<div><div> Waga [kg]: </div> <div> <input ... /> </div> </div>

I wtedy w takim divie rozmieszczasz sobie po 50% czy tam ile chcesz miejsca i powinno być to wszystko pod sobą jeśli zrobisz tak dla każdego.