Koduję właśnie teraz formularz HTML i mam trochę problemów z wyrównaniem pola komentarzy po prawej stronie pól tekstowych.

Mam 3 pola tekstowe pod sobą i chcę, aby pole tekstowe komentarzy było wyrównane po prawej stronie, próbowałem przesunąć je w prawo, a następnie nadać mu ujemny górny margines, aby przesunąć go w górę, ale tekst etykiety, który czyta „komentarze ' nie pływa z polami tekstowymi, ponieważ nie ma klasy

Próbowałem również oddzielić je za pomocą komórek tabeli 2, ale to nie pomaga, ponieważ gdy chcę wyświetlić w telefonie komórkowym za pomocą układu responsywnego, mogę przenieść pole komentarzy, gdy utknęło w komórce tabeli

Oto przykład kodu pływającego, którego próbowałem

    <style type="text/css">
    ![enter image description here][1]<!--
    body {
background-color: #FFF;
    }

    #form {
width:960px;
background-color:#edf8ff;
height:650px;
    }

    .gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
    }

    .gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
    }

    .gezza-comments{
width:437px;
height:300px;
float:right;
margin-top:-80px;
    }

    -->
    </style></head>

    <body>


    <div id="form">

    <form action="" class="gezza-form" method="post" >
    First Name<br />
    <input name="firstname" type="text" class="gezza-field" /><br/>
    Last Name<br />
    <input name="lastname" type="text" class="gezza-field" /><br/>
    Email Address<br />
    <input name="email" type="text" class="gezza-field" />
    Comments<textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
    </form>


    </div><!-- close form -->

Oto co staram się osiągnąć

[1]: http://i.stack.imgur.com/g3yO8.png ZOBACZ OBRAZEK

1
Gezzamondo 25 luty 2012, 14:13

2 odpowiedzi

Najlepsza odpowiedź

Usuń margin-top:-80; float:right ze stylu pola komentarza i umieść pole komentarza w div, przed innymi polami formularza. Przesuń div w prawo. Zobacz przykładowy kod pokazany poniżej:

<style type="text/css">
    ![enter image description here][1]<!--
    body {
background-color: #FFF;
    }

    #form {
width:960px;
background-color:#edf8ff;
height:650px;
    }

    .gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
    }

    .gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
    }

    .gezza-comments{
width:437px;
height:300px;
    }

    -->
    </style></head>

    <body>


    <div id="form">

    <form action="" class="gezza-form" method="post" >
    <div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
    First Name<br />
    <input name="firstname" type="text" class="gezza-field" /><br/>
    Last Name<br />
    <input name="lastname" type="text" class="gezza-field" /><br/>
    Email Address<br />
    <input name="email" type="text" class="gezza-field" />

    </form>

Działa na moim komputerze i powinien działać na telefonie komórkowym.

1
user1004912 25 luty 2012, 14:40

Myślę, że twoje rozwiązanie jest takie. Proszę spróbować

<style type="text/css">
<!--
body { background-color: #FFF;
}

#form { width:960px; background-color:#edf8ff; height:650px;
}

.gezza-form { width:894px; margin:0 auto; margin-top:20px;
}

.gezza-field { width:437px; height:25px; margin-bottom:10px;  
border: 1px solid #d9e7f1;  }

.gezza-comments{ width:437px; height:300px;

margin-top:10px;
}

-->
</style></head>

<body>


<div id="form">

<form action="" class="gezza-form" method="post" >
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" /><br/>
Comments<br/> <textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
</form>


</div><!-- close form -->
0
Johnny Bones 30 marzec 2016, 19:27