>

서로 관련된 3 가지 문제가 있습니다 :

<올>
  • 두 번째 테두리로 흐르는 테두리의 배경색, 첫 번째 테두리와 두 번째 테두리 사이의 공백을 흰색으로 만드는 방법은 무엇입니까?
  • 페이지를 최소화하면 배경색이 확장되어 모든 텍스트 상자와 테두리가 같은 것을 덮지 않습니다. 최소화 후 테두리와 배경색이 모든 내용을 덮는 방법은 무엇입니까? overflow : hidden and scroll을 시도했습니다. 스크롤은 내가 원하는 것을 수행하지만 스크롤 바는 테두리 클래스가 아닌 브라우저로 만들어야합니다.
  • 클릭 할 때까지 표시되도록 축소를 설정 한 다음 클릭 할 때까지 숨기지 않고 숨겨집니다. 도움을 주셔서 감사합니다. 코드를 실행하면 무슨 뜻인지 알 수 있습니다.
  • .wrapper {
      margin: 0 auto;
      width: 100%;
    }
    /* Change 960 to desired width */
    .border {
      border-style: double;
      border-width: 10px;
      background-color: silver;
      overflow: expand;
    }
    .collapsible {
      background-color: sliver;
      color: black;
      cursor: pointer;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }
    .active,
    .collapsible:hover {
      background-color: lightgray;
    }
    .collapsible:after {
      content: "\002B";
      background-color: sliver;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    .active:after {
      content: "\2212";
    }
    .content {
      background-color: sliver;
      padding: 0 18px;
      max-height: 0;
      transition: max-height 0.2s ease-out;
    }
    
    

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap  /3.4.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <div class="container">
      <div class="border">
        <button class="collapsible" data-toggle="collapse" data-target="#demo">
          Simple collapsible
        </button>
        <div id="demo" class="collapse">
          <div class="row" style="white-space:nowrap;">
            <br />
            <label style="margin-right:78px; margin-left:15px">Assign Date</label>
            <label style="margin-right:78px;">Task Subject</label>
            <label style="margin-right:78px;">Assigner</label>
            <label style="margin-right:78px;">Pirorty</label>
            <label style="margin-right:78px;">Status</label>
            <label style="margin-right:78px;">Category</label>
            <label style="margin-right:78px;">Due Date</label>
            <label style="margin-right:78px;">Complete</label>
          </div>
          <div class="row" style="white-space:nowrap;">
            <input
              type="text"
              name="AssignDate"
              style="width:80px; margin-right:78px; margin-left:15px"
            />
            <input
              type="text"
              name="TaskSubject"
              style="margin-right:78px; width:85px"
            />
            <input
              type="text"
              name="Assigner"
              style="margin-right:50px; width:85px"
            />
            <select name="Pirorty" style="width: 60px; margin-right:70px">
              <option>High </option>
              <option>Low</option>
              <option>Normal</option>
            </select>
            <select name="Status" style="width: 100px; margin-right:20px">
              <option>I</option>
              <option>N</option>
              <option>R</option>
              <option>Re</option>
              <option>Cancelled</option>
              <option>Closed</option>
            </select>
            <select name="Category" style="width: 100px; margin-right:40px">
              <option>A</option>
              <option>D</option>
              <option>E</option>
              <option>INFO</option>
              <option>I</option>
              <option>M</option>
              <option>N</option>
              <option>R</option>
              <option>S</option>
            </select>
            <input
              type="date"
              name="DueDate"
              style="width: 80px; margin-right:60px"
            />
            <select name="Category" style="width: 50px">
              <option>10</option>
              <option>20</option>
              <option>30</option>
              <option>40</option>
              <option>50</option>
              <option>60</option>
              <option>70</option>
              <option>80</option>
              <option>90</option>
              <option>100</option>
            </select>
            <br />
            <br />
            <input
              type="checkbox"
              name="IncludeTasksIWasCcedOn"
              style="margin-left:15px"
            />&nbsp;Include Tasks I was CC'd On&nbsp;
            <button type="submit" style="float :right; margin-right:15px">
              Filter
            </button>
            <button type="reset" style="float :right; margin-right:15px">
              Clear
            </button>
            <br />
            <br />
            <br />
          </div>
        </div>
      </div>
    </div>
    
    

    • 답변 # 1

      jsfiddle of collapse

      4) 은색은 CSS에 유효한 색상이 아닙니다.

      3) 확장을 시작하려면 #demo 요소에 'in'클래스를 추가해야합니다

      2) 추가해야합니다

      #demo {
          overflow: hidden;
      }
      
      

      스타일 영역에

      . 자식보다 작을 때 요소 높이가 넘칠 수있는 자식을 숨길 수 있습니다

      1) bg 색상이 존재하는 이유는 부모 요소의 배경색을 설정하기 때문입니다. bg 색상은 재정의되지 않는 한 어린이에게 흐릅니다. 부모 bg를 흰색으로 설정하고 자식 bg 색상을은으로 설정했습니다.

      <!DOCTYPE html>
      <html>
      <head>
      <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
      >
      <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
      >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
      </script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
       </script>
           <style>
              .wrapper {
              margin: 0 auto;
              width: 100%;
              }
          /* Change 960 to desired width */
          .border {
              border-style: double;
              border-width: 10px;
              /* changed bg color */
              background-color: white;
              /* expand is not a valid value
              overflow: expand; */
          }
          .collapsible {
              /* sliver is not a valid color */
              background-color: sliver;
              color: black;
              cursor: pointer;
              width: 100%;
              border: none;
              text-align: left;
              outline: none;
              font-size: 15px;
          }
          .active,
          .collapsible:hover {
              background-color: lightgray;
          }
          .collapsible:after {
              content: '\002B';
              background-color: sliver;
              font-weight: bold;
              float: right;
              margin-left: 5px;
          }
          .active:after {
              content: "\2212";
          }
          .content {
              background-color: sliver;
              padding: 0 18px;
              max-height: 0;
              transition: max-height 0.2s ease-out;
          }
          #demo {
              overflow: hidden;
          }
          /* added bg color here for inner area */
          #demo .row {
              background-color: silver;
          }
          </style>
          </head>
          <body>
      <div class="container">
          <div class="border">
              <button
                  class="collapsible"
                  data-toggle="collapse"
                  data-target="#demo"
              >Simple collapsible</button>
              <div
                  id="demo"
                  class="collapse in"
              >
                  <div style="clear:both;">
                      <div
                          class="row"
                          style="white-space:nowrap;"
                      >
                          <br />
                          <label style="margin-right:78px; margin-left:15px">Assign Date</label>
                          <label style="margin-right:78px;">Task Subject</label>
                          <label style="margin-right:78px;">Assigner</label>
                          <label style="margin-right:78px;">Pirorty</label>
                          <label style="margin-right:78px;">Status</label>
                          <label style="margin-right:78px;">Category</label>
                          <label style="margin-right:78px;">Due Date</label>
                          <label style="margin-right:78px;">Complete</label>
                      </div>
                      <div
                          class="row"
                          style="white-space:nowrap;"
                      >
                          <input
                              type="text"
                              name="AssignDate"
                              style="width:80px; margin-right:78px; margin-left:15px"
                          />
                          <input
                              type="text"
                              name="TaskSubject"
                              style="margin-right:78px; width:85px"
                          />
                          <input
                              type="text"
                              name="Assigner"
                              style="margin-right:50px; width:85px"
                          />
                          <select
                              name="Pirorty"
                              style="width: 60px; margin-right:70px"
                          >
                              <option>High </option>
                              <option>Low</option>
                              <option>Normal</option>
                          </select>
                          <select
                              name="Status"
                              style="width: 100px; margin-right:20px"
                          >
                              <option>I</option>
                              <option>N</option>
                              <option>R</option>
                              <option>Re</option>
                              <option>Cancelled</option>
                              <option>Closed</option>
                          </select>
                          <select
                              name="Category"
                              style="width: 100px; margin-right:40px"
                          >
                              <option>A</option>
                              <option>D</option>
                              <option>E</option>
                              <option>INFO</option>
                              <option>I</option>
                              <option>M</option>
                              <option>N</option>
                              <option>R</option>
                              <option>S</option>
                          </select>
                          <input
                              type="date"
                              name="DueDate"
                              style="width: 80px; margin-right:60px"
                          />
                          <select
                              name="Category"
                              style="width: 50px"
                          >
                              <option>10</option>
                              <option>20</option>
                              <option>30</option>
                              <option>40</option>
                              <option>50</option>
                              <option>60</option>
                              <option>70</option>
                              <option>80</option>
                              <option>90</option>
                              <option>100</option>
                          </select>
                          <br />
                          <br />
                          <input
                              type="checkbox"
                              name="IncludeTasksIWasCcedOn"
                              style="margin-left:15px"
                          >&nbsp;Include Tasks I was CC'd On&nbsp;
                          <button
                              type="submit"
                              style="float :right; margin-right:15px"
                          >Filter</button>
                          <button
                              type="reset"
                              style="float :right; margin-right:15px"
                          >Clear</button>
                          <br />
                          <br />
                          <br />
                      </div>
                  </div>
              </div>
          </div>
      </body>
      </html>
      
      

  • 이전 c++ - std - : u8string을 utf8 문자의 c 스타일 문자열로 복사하십시오
  • 다음 android - Kotlin Firebase onFailureListener null 예외