Question

我有这个示例输出here。我不能切断中间的白色空间，只保留中间的空白。有没有办法做到这一点？

这是我的HTML代码：

    <center>
    <div class="container">
        <div class="panel panel-danger">
            <div class="panel-body">
                <div class="input-group col-xs-4">
                    <label for="usr">Bus Name:</label>
                    <input type="text" class="form-control" name="busName" required="required">
                </div>  

                <div class="input-group col-xs-4">
                     <label for="usr">Plate Number:</label>
                     <input type="text" class="form-control" name="plateNo" required="required" maxlength="6">
                </div>

                <div class="input-group col-xs-4">
                      <label for="usr">Driver Assigned:</label>
                      <input type="text" class="form-control" name="driverAssigned" required="required">
                </div>

                <div><p></div>
                <div class="btn-group" role="group" aria-label="...">
                      <button type="submit" class="btn btn-primary" value="Submit">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>
</center>

这是我的css代码：

body {
  background: url("images/busView.jpg");
  background-repeat: no-repeat;
  background-size: 100%
}

div.container {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

提前谢谢。

Answer 1

添加width: auto;最有可能解决您的问题。您可能需要添加一些填充以在表单周围留出空间。

div.container {
    width: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}

小提琴：https://jsfiddle.net/mr0k0wm7/

html中的空格

1 个答案: