0

开始时，第一个标签行前面有空格，导致它被向前推。因此，我在 HTML 页面中使用样式对其进行了调整，为什么以及如何解决此问题？

我也无法更改表单的文本框大小。我想更改 Food div 容器中的文本框大小，将两个文本框对齐在一条直线上，并在框之间添加单词“To”，而不影响整个表单对齐。

  #output_image{
        border-style: solid;
        float:left;
    }

    .inputfile {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: relative;
        z-index: -1;
    }
    .label{
        opacity: 0;
    }
    .inputfile + label {
        position: relative;
        font-size: 2.5em;
        display: inline-block;
        color: black;
        text-align: center;
        padding: 2px 2px;
        text-decoration: none;
        float:left;
    }

    .inputfile:focus + label,
    .inputfile + label:hover {

    }

    .inputfile + label {
        cursor: pointer;
    }
    .iconplus{
        position: relative;
    }
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
            Instagram Like
        </button>

        <!-- Modal -->
        <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl  modal-dialog-right" role="document">
                <div class="modal-content">
                    <div class="modal-header ">
                        <h2 style="font-family: Lato; font-size:29pt; font-weight:bold;" class="modal-title " id="exampleModalLongTitle">Instagram</h2>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body form-horizontal">
<form class="form-horizontal" id="step2">
                        <img id="output_image" height=270px width=270px>
                        <input  class="inputfile" type="file" id="getFile" accept="image/*" onchange="preview_image(event)">
                        <label for="getFile" <i class="fa fa-plus-circle iconplus" style = "position:relative; top:23.1rem; right:3.45rem;"></i> </label>


                        
                              <div class="form-group row align-items-center justify-content-center">
                                <label style="font-family:Lato; font-size:20pt; font-weight:normal; margin-right:6.8rem;" for="name" class="col-sm-4 control-label col text-left">Name:</label>
                                <div class="col-sm-5 ">
                                    <input id="name" style= "margin-right:10rem;" class="form-control input-lg row align-items-left justify-content-left" type="text" placeholder="Enter Name" />
                                </div>
                            </div>
                            <div class="form-group row align-items-center justify-content-center">
                                <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Email:</label>
                                <div class="col-sm-5 ">
                                    <input id="name" class="form-control input-lg row align-items-left justify-content-left" type="text" placeholder="Enter Your Email Address" />
                                </div>
                            </div>
                            
                            <div class="form-group row align-items-center justify-content-center">
                                <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-2 control-label col text-left " >Food Date:</label>
                                <div class="col-sm-3">
                                    <input id="name" class="form-control input-lg row align-items-center justify-content-left" type="password" placeholder="Start Food" />
                                </div>
                                   <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-2 control-label col text-left " >To</label>
                                 <div class="col-sm-3">
                                    <input id="name" class="form-control input-lg row align-items-center justify-content-left" type="password" placeholder="End Food" />
                                </div>
                            </div>
                 
                   
                            </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Create</button>
                    </div>
                        </div>
                </div>
            </div>
        </div>

4

0 回答 0