将输入域定位在玉器中

时间:2016-06-07 09:06:10

标签: html css pug

尝试在其旁边输入一个圆圈,一个输入字段,旁边一个按钮。这里面有一个div,里面有50%,div旁边有一个浮点数,也是50%,里面有一个图像。

enter image description here

这是JADE文件

section(class=spec.__class)&attributes(attributes)
      .row
        .options
            .left.first
                img(src='images/prijzen.png', alt='prijzen')
            .right 
                p. 
                    In onze Surprise Webshop is elk pakje gratis. Wat u precies heeft besteld, blijft wel een verrassing tot u het pakje ophaalt in een afhaalpunt of pakjesautomaat naar keuze.

                .row.clear
                        span.nr.bgred 1 

                    .row.rightfields

                        form.inputform(name="add-estimation", method="post")
                            .inputfielddiv.floatleft
                                input.styleds(type="text", name="title", placeholder="Vul hier uw persoonlijke code in")
                            .inputdiv.floatright
                                a.button.red.round.ctaright(type="submit", value=">", href="#kiespakje")

这是CSS

 .row {
        @include center(1024px);
        margin-bottom: 4em;
        width: auto;
        max-width: 840px;
        float: none;
        display: block;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 2em;
        .fix {
            clear: both;
        }
        .clear {
            clear: both;
        }
        .inputdiv {
            overflow: hidden;
            padding-right: .5em;
        }
        .options {
            margin-top: 70px;
            .left {
                float: left;
                clear: none;
                text-align: inherit;
                width: 40%;
                margin-left: 0px;
                margin-right: 5%;
            }
            .left img{
                width: 340px;
                margin-left: 20px;
                margin-top: 30px;
                margin-bottom: 15px;
            }
            .right {
                padding: 0 20px;
                float: left;
                clear: none;
                text-align: inherit;
                width: 100%;
                margin-left: 0px;
                margin-right: 0%;
                border-left: 0;
                @include breakpoint($tablets) {
                    padding: 0 0 0 50px;;
                }
                .nr {
                    position: relative;
                    text-align: center;
                    padding-top: 15px;
                    width: 3em;
                    height: 3em;
                    display: inline-block;
                    border-radius: 100%;
                }
                .bgred {
                    background: #EF2637;
                    color: white;
                }
                .leftbol {
                    float: left;
                    width: 100%;
                }
                .rightfields {
                    width: 100%;
                    float: right;
                    display: inline-block;
                    .inputform {
                        width: 100%;
                        .floatleft {
                            width: 75%;
                            float: left;
                            @include breakpoint($tablets) {
                                width: 100%;
                            }
                            .styleds {
                                width: 100%;
                                padding: 0.8em;
                                margin-bottom: 1em;
                                border-radius: 0.2em;
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                appearance: none;
                                box-shadow: none;
                                border: none;
                                color: black !important;
                                border-radius: 0;
                                background-color: #D5D5D5;
                                font-style: italic;
                            }
                        }
                        .floatright {
                            width: 20%;
                            float: right;
                            .buttoncode {
                                text-decoration: none;
                                border: none;
                                padding: 22px;
                                font-weight: bold;
                                font-size: 15px;
                                display: inline-block;
                                width: 100%;
                                max-width: 250px;
                                margin-top: 0 auto;
                                text-align: center;
                                color: white;
                                background-color: #EF2637;
                            }
                        }
                    }
                }
            }
            .right p {
                text-align: center;
                margin-left: 0px;
                @include breakpoint($tablets) {
                    text-align: left;
                }
            }
            .right span{
                margin-left: 140px;
                @include breakpoint($tablets) {
                    margin-left: 0px;
                }
            }
        }
    }

0 个答案:

没有答案