顯示器中不期望的偏移

我有以下繪制家譜的css代碼:

.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 {
  position: relative;   
  font-size: 16px;
  text-align: center;
}

總的來說，這樣做效果很好，但不幸的是，塊的顯示會出現偏移。舉個簡單的例子，下面的html代碼

<html>

<HEAD>
<title> Family tree </title>
<link rel="stylesheet" href="styles.css">
<META http-equiv="content-type" CONTENT="text/html; charset=UTF-8" />
</HEAD>

<body bgcolor="white" background="" vlink="peru" alink="peru" link="peru">

<b>

<div class="tree" align=center>
    <ul>
        <li>
            <div class="person child male">
                <div class="content">
                    some very very big familly name
                </div>
            </div>
            <ul >
                <li>
                    <div class="person child male">
                        <div class="content">Uncle</div>
                    </div>              
                </li>                   
            </ul>       
        </li>
    </ul>
</div>

</body>

</html>

產生以下顯示:

tree

我們看到，第二個塊相對于第一個塊向右偏移，而它應該位于第一個塊的正下方。

當我使用元素檢查器查看它時，我看到一個額外的padding-inline-start:40px；在ul。也許這是ul的默認風格。你可以選擇移除它。為了使孩子居中，也許你可以使用顯示:伸縮

嘗試改變

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

到

.tree ul {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-inline-start: 0;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

嘗試添加style = & quot填充:0；"敬你的第二次& ltul & gt

喜歡:& ltul style = & quot填充:0；"& gt

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 {
  position: relative;   
  font-size: 16px;
  text-align: center;
}

<div class="tree" align=center>
<ul>
  <li>
      <div class="person child male">
          <div class="content">
              some familly name  
          </div>
      </div> 
      <ul style="padding: 0;">
          <li>
              <div class="person child male">
                  <div class="content">Uncle</div>
              </div>              
          </li>                   
      </ul>       
  </li>
</ul>
</div>

試試這個:

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

.tree ul li ul {
    position: relative;
    padding: 20px 0 0 0;
} 

.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 {
  position: relative;   
  font-size: 16px;
  text-align: center;
}

</style>

<div class="tree" align="center">
   <ul>
        <li>
            <div class="person child male">
                <div class="content">
                    some familly name  
                </div>
            </div>
            <ul>
                <li>
                    <div class="person child male">
                        <div class="content">Uncle</div>
                    </div>              
                </li>                   
            </ul>       
        </li>
    </ul>
</div>

上一篇mysql刪除全部表數據庫

下一篇c mvc 返回json文件下載

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

顯示器中不期望的偏移

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

顯示器中不期望的偏移

相關文章