Цвет Div не очерчивает все элементы - PullRequest
Новая
       6

Цвет Div не очерчивает все элементы

0 голосов
/ 14 июля 2020

Я пытаюсь придать своим элементам зеленый фон, но мой div не контурирует все ожидаемые элементы. Я попытался найти проблему в своем div, но мне кажется, что все в порядке.

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  <title>CLOUD</title>
  <style>
.bg {
      /* The image used */
      background-image: url({{ url_for('static', filename='Picture13.png')
    }
  }
  );
  background-repeat: no-repeat;
  background-size: cover;
}
.divSquare {
  margin:4px;
  border:1px solid black;
  float: left
}
  </style>
</head>

<body class="bg">
  <div class="header"></div>
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
                <div class="spinner diagonal part-1"></div>
                <div class="spinner horizontal"></div>
                <div class="spinner diagonal part-2"></div>
            </label>
  <div id="sidebarMenu">
    <ul class="sidebarMenuInner">
      <li><a href="/upload">UPLOAD</a></li>
      <li><a href="/download">DOWNLOAD</a></li>
      <li><a href="/filesystem">FILESYSTEM</a></li>
    </ul>
  </div>

  <div style="padding-top: 21%; padding-left: 7%; background-color: green">
    <div style="float:left; width: 15%;padding-right: 2%; padding-left: 2%;">
      <div class="form-group">
        <label>File Type</label>
        <select class="browser-default custom-select" name=e xtensions method="POST" action="/">
          {% for extension in extensions %}
          <option value="{{extension}}" SELECTED>{{extension}}</option>" {% endfor %}
        </select>
      </div>
    </div>

    <div style=" float:left; padding-right: 3%;">
      <div class="form-group">
        <label>Parent Folder</label>
        <select class="browser-default custom-select" name=d irs method="POST" action="/">
          {% for dir in dirs %}
          <option value="{{dir}}" SELECTED>{{dir}}</option>" {% endfor %}
        </select>
      </div>
    </div>

    <div class="form-group row" style="float:left">
      <div class="form-group">
        <label>Uploaded Date</label>
        <div class="col-10" style="padding-left:0px; padding-right:0px; width:250px">
          <input class="form-control" type="date" value="2020-09-01" name="date" id="example-date-input">
        </div>
      </div>
    </div>
  </div>


</body>

</html>

В результате он дает следующий результат: введите описание изображения здесь

Почему элементы с расширением имени и датой также не имеют зеленого фона?

1 Ответ

1 голос
/ 14 июля 2020 

<!DOCTYPE html>
<html>
<head>
    

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
        <title>CLOUD</title>
        <style>
            .bg {
                /* The image used */
                background-image: url({{ url_for('static', filename='Picture13.png')}});
    background-repeat: no-repeat;
    background-size: cover;
    }
    .divSquare{
        margin:4px; border:1px solid black; float: left
    }

    .mainDiv{
      display: flex;
    }
    </style>
    </head>
    <body class="bg">
        <div class="header"></div>
        <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
        <label for="openSidebarMenu" class="sidebarIconToggle">
            <div class="spinner diagonal part-1"></div>
            <div class="spinner horizontal"></div>
            <div class="spinner diagonal part-2"></div>
        </label>
    <div id="sidebarMenu">
        <ul class="sidebarMenuInner">
            <li><a href="/upload">UPLOAD</a></li>
            <li><a href="/download">DOWNLOAD</a></li>
            <li><a href="/filesystem">FILESYSTEM</a></li>
        </ul>
    </div>
    
    <div class="mainDiv" style="padding-top: 21%; background-color: green">
        <div style="float:left; width: 15%;padding-right: 2%; padding-left: 2%;" >
            <div class="form-group">
                <label>File Type</label>
                <select class="browser-default custom-select" name= extensions method="POST" action="/" >
                    {% for extension in extensions %}
                    <option value= "{{extension}}" SELECTED>{{extension}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div style="padding-right: 3%;">
            <div class="form-group">
                <label>Parent Folder</label>
                <select class="browser-default custom-select" name= dirs method="POST" action="/" >
                    {% for dir in dirs %}
                    <option value= "{{dir}}" SELECTED>{{dir}}</option>"
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group row">
            <div class="form-group">
                <label>Uploaded Date</label>
                <div class="col-10" style="padding-left:0px; padding-right:0px; width:250px">
                    <input class="form-control" type="date" value="2020-09-01" name="date" id="example-date-input">
                </div>
            </div>
        </div>
    </div>


</body>
</body>
</html>

Это то, чего вы хотите достичь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...