css form - проблема с полем / отступом - код и изображение включены - PullRequest
Новая
       27

css form - проблема с полем / отступом - код и изображение включены

1 голос
/ 13 марта 2012

У меня проблема с контактной формой html / css. В идеале я бы хотел, чтобы «label» и «input» находились на одном уровне с границей в 1 пиксель, продолжаясь от метки до определенной конечной точки (не определенной ширины). Это возможно? Чего мне не хватает? 

<div id="contact">
        <div id="invite">
            <h1>Let's Talk.</h1>
            <h2 class="postinfo">
                <p>Have you got a project needing an eye for detail and a creative touch? <br>I&#39;d love to hear from you. </p>
            </h2>
        </div><!-- end invite -->
        <form action="#" method="post">
            <fieldset>
                <label for="name"><h1>Name:</h1></label>
                <input type="text" id="name" placeholder="" />

                <label for="email"><h1>Email:</h1></label>
                <input type="text" id="email" placeholder="" />

                <label for="subject"><h1>Subject:</h1></label>
                <input type="subject" id="subject" placeholder="" />

                <label for="message"><h1>Message:</h1></label>
                <textarea id="message" placeholder=""></textarea>

                <input type="submit" value="Send" />
            </fieldset><!-- end fieldset -->
        </form><!-- end form -->
    </div><!-- end contact -->

#contact {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
    width: 533px;
}
#invite .postinfo {
    list-style-type: none;
    margin-left: ;
    width: 150px;
}
#form {
    float: right;
    margin-top: -85px;
    margin-left: 230px; 
}
#form fieldset {
    border-style: none;
    margin-left: -50px;
    margin-top: -25px;
}
#form fieldset label {
    padding-right: 50px;
}
#form fieldset input {
    width: 300px;
}

http://i.stack.imgur.com/B6wF8.png

1 Ответ

0 голосов
/ 15 марта 2012

Я немного поиграл с вашим кодом, и вот что я придумал:

Вот ваш HTML: 

<contact>
<form action="#" method="post">
        <fieldset>
            <div class="clear">
            <label for="name"><h1>Name:</h1></label>
            <input type="text" id="name" placeholder="" />
            </div>

            <div class="clear">
            <label for="email"><h1>Email:</h1></label>
            <input type="text" id="email" placeholder="" />
            </div>

            <div class="clear">
            <label for="subject"><h1>Subject:</h1></label>
            <input type="subject" id="subject" placeholder="" />
            </div>

            <div class="clear">
            <label for="message"><h1>Message:</h1></label>
            <textarea id="message" placeholder=""></textarea>
            </div>

            <div class="clear">
            <input type="submit" value="Send" />
            </div>
        </fieldset><!-- end fieldset -->
    </form><!-- end form -->
</contact><!-- end contact -->

, а вот ваш CSS: 

body  { font-family:arial,helvetica,sans-serif ;
    font-size:14px ;
    font-weight:bold ;
}

h1  { font-size:16px ;
    margin:0 ;
    padding:0 ;
}

contact {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
    width: 533px;
}
contact invite .postinfo {
    list-style-type: none;
    margin-left: ;
    width: 150px;
}

contact form {
    float: right;
    margin-top: -85px;
    margin-left: 230px; 
}

contact form fieldset {
    border-style: none;
    margin-left: -50px;
    margin-top: -25px;
}

contact form fieldset label { width:100px ;
    float:left }

contact form fieldset input { 
    width: 200px;
    float:right ;
}

.clear  { clear:both ;
    line-height:30px ;
}

Вам нужно будет поиграть со своей меткой и шириной ввода в зависимости от размера шрифта, который вы используете.

Best,

Cynthia

...