色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何更改內(nèi)嵌塊元素的參考點

CSS
劉姿婷2年前9瀏覽0評論

這是我對樹的代碼:

/* Tree */

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  display: table-cell;
  text-align: center;
  list-style-type: none;
  position: relative;
  /*the padding is 20px + border-top = 23px*/
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 3px solid #ccc;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 3px solid #ccc;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 3px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 3px solid #ccc;
  width: 0;
  height: 20px;
}

.tree li .family {
  position: relative;
}


/* Person */

.person {
  border: 3px solid black;
  padding: 10px;
  min-width: 150px;
  #min-height: 100px;
  to increase the min height of the boxes background-color: #FFFFFF;
  display: inline-block;
}

.person.female {
  border-color: #F45B69;
  top: 0px
}

.person.male {
  top: 0px;
  border-color: #456990;
}

.person .content {
  font-size: 16px;
  align=center;
  text-align: center;
}

<body bgcolor="white" background="" vlink="peru" alink="peru" link="peru">
  <p align=center>
    <br><br>
    <b>
      <font size=6> <I> FAMILY TREE </I> </font>
      </br>

      <div class="tree" align=center>
        <ul>
          <li>
            <div class="person child male">
              <div class="content">
                Dupont Charles </br>
                France, 1900 - France, 1970</br></br>
                <div align=left>
                  Spouse: Celine, born Dupone</br>
                  &#10551 TREE
                </div>
              </div>
            </div>
            <ul>
              <li>
                <div class="person child male">
                  <div class="content">Uncle</br></br></div>
                </div>
              </li>
              <li>
                <div class="person child female">
                  <div class="content">Aunt blabla</br>blabla</br>blabla</div>
                </div>
              </li>
              <li>
                <div class="person child female">
                  <div class="content">Mother</br>&nbsp</div>
                </div>
                <ul>
                  <li>
                    <div class="person child male">
                      <div class="content">Me</div>
                    </div>
                  </li>
                  <li>
                    <div class="person child female">
                      <div class="content">Sister</div>
                    </div>
                    <ul>
                      <li>
                        <div class="person child male">
                          <div class="content">Me</div>
                        </div>
                      </li>
                      <li>
                        <div class="person child female">
                          <div class="content">Sister</div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
  </p>
</body>

因為您正在使用display: table-cell，所以您可以使用vertical-align: top將子div移動到單元格的頂部。

你正在使用一大堆被否決的html，比如& ltfont & gt你可能想看看。我還在你的CSS的最后一條規(guī)則中把align=center改為align:center，雖然我還沒有看到它的效果。

下面標記的代碼

/* Tree */

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  display: table-cell;
  text-align: center;
  vertical-align: top; /* added this */
  list-style-type: none;
  position: relative;
  /*the padding is 20px + border-top = 23px*/
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 3px solid #ccc;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 3px solid #ccc;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 3px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 3px solid #ccc;
  width: 0;
  height: 20px;
}

.tree li .family {
  position: relative;
}


/* Person */

.person {
  border: 3px solid black;
  padding: 10px;
  min-width: 150px;
  #min-height: 100px;
  to increase the min height of the boxes background-color: #FFFFFF;
  display: inline-block;
}

.person.female {
  border-color: #F45B69;
  top: 0px
}

.person.male {
  top: 0px;
  border-color: #456990;
}

.person .content {
  font-size: 16px;
  align:center; /* changed this from  = to : */
  text-align: center;
}

<body bgcolor="white" background="" vlink="peru" alink="peru" link="peru">
  <p align=center>
    <br><br>
    <b>
      <font size=6> <I> FAMILY TREE </I> </font>
      </br>

      <div class="tree" align=center>
        <ul>
          <li>
            <div class="person child male">
              <div class="content">
                Dupont Charles </br>
                France, 1900 - France, 1970</br></br>
                <div align=left>
                  Spouse: Celine, born Dupone</br>
                  &#10551 TREE
                </div>
              </div>
            </div>
            <ul>
              <li>
                <div class="person child male">
                  <div class="content">Uncle</br></br></div>
                </div>
              </li>
              <li>
                <div class="person child female">
                  <div class="content">Aunt blabla</br>blabla</br>blabla</div>
                </div>
              </li>
              <li>
                <div class="person child female">
                  <div class="content">Mother</br>&nbsp</div>
                </div>
                <ul>
                  <li>
                    <div class="person child male">
                      <div class="content">Me</div>
                    </div>
                  </li>
                  <li>
                    <div class="person child female">
                      <div class="content">Sister</div>
                    </div>
                    <ul>
                      <li>
                        <div class="person child male">
                          <div class="content">Me</div>
                        </div>
                      </li>
                      <li>
                        <div class="person child female">
                          <div class="content">Sister</div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
  </p>
</body>