2023年6月6日 17:22:14go评论64阅读模式

英文:

Undesirable offset in the display

问题

我有以下用于绘制家谱树的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; /* 添加了这个 */
  list-style-type: none;
  position: relative;
  /* padding 是 20px + border-top = 23px */
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/* 使用 ::before 和 ::after 来绘制连接线 */

.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;
}

/* 从没有兄弟元素的元素中移除左右连接线 */

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

/* 从单个子元素的顶部移除空白 */

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

/* 从第一个子元素中移除左连接线和从最后一个子元素中移除右连接线 */

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

/* 向最后的节点添加垂直连接线 */

.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;
}

/* 添加从父元素到子元素的垂直连接线 */

.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 {
  border: 3px solid black;
  padding: 10px;
  min-width: 150px;
  /* 增加框的最小高度 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>家谱树</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">
					非常非常长的家庭名字
				</div>
			</div>
			<ul >
				<li>
					<div class="person child male">
						<div class="content">叔叔</div>
					</div>				
				</li>					
			</ul>		
		</li>
	</ul>
</div>

</body>

</html>

生成以下显示：

我们可以看到第二个块相对于第一个块向右偏移，而应该居中显示在下面。

英文:

I have the following css code for drawing familly trees:

.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: &#39;&#39;;
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: &#39;&#39;;
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;
}

Globally, this works well, but unfortunately, an offset appears in the display of the blocks.
As a simple example, the following html code

&lt;html&gt;
&lt;HEAD&gt;
&lt;title&gt; Family tree &lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
&lt;META http-equiv=&quot;content-type&quot; CONTENT=&quot;text/html; charset=UTF-8&quot; /&gt;
&lt;/HEAD&gt;
&lt;body bgcolor=&quot;white&quot; background=&quot;&quot; vlink=&quot;peru&quot; alink=&quot;peru&quot; link=&quot;peru&quot;&gt;
&lt;b&gt;
&lt;div class=&quot;tree&quot; align=center&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;div class=&quot;person child male&quot;&gt;
&lt;div class=&quot;content&quot;&gt;
some very very big familly name
&lt;/div&gt;
&lt;/div&gt;
&lt;ul &gt;
&lt;li&gt;
&lt;div class=&quot;person child male&quot;&gt;
&lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
&lt;/div&gt;				
&lt;/li&gt;					
&lt;/ul&gt;		
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Produce the following display:

We see that the second block is offset to the right with respect to the first block, while it should be centered just below it.

答案1

得分: 1

尝试将style="padding: 0;"添加到你的第二个<ul>，就像这样：<ul style="padding: 0;">。

英文:

Try to add style="padding: 0;" to your second <ul>

like : <ul style="padding: 0;">

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: &#39;&#39;;
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: &#39;&#39;;
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;
}

&lt;div class=&quot;tree&quot; align=center&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;div class=&quot;person child male&quot;&gt;
&lt;div class=&quot;content&quot;&gt;
some familly name  
&lt;/div&gt;
&lt;/div&gt; 
&lt;ul style=&quot;padding: 0;&quot;&gt;
&lt;li&gt;
&lt;div class=&quot;person child male&quot;&gt;
&lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
&lt;/div&gt;              
&lt;/li&gt;                   
&lt;/ul&gt;       
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

答案2

得分: 1

尝试这个：

&lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;

&lt;!-- 语言: lang-css --&gt;

&lt;style&gt;
    .tree &gt; 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; /* 添加此行 */
        list-style-type: none;
        position: relative;
        /* padding 是 20px + border-top = 23px */
        padding: 23px 5px 0 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    /* 使用 ::before 和 ::after 绘制连接线 */

    .tree li::before,
    .tree li::after {
        content: &#39;&#39;;
        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;
    }

    /* 需要移除没有兄弟节点的元素的左右连接线 */

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

    /* 移除单个子节点的顶部间距 */

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

    /* 移除第一个子节点的左连接线和最后一个子节点的右连接线 */

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

    /* 为最后的节点添加垂直连接线 */

    .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;
    }

    /* 从父元素添加向下的连接线 */

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

    .tree li .family {
        position: relative;
    }

    /* 个人 */

    .person {
        border: 3px solid black;
        padding: 10px;
        min-width: 150px;
        /* 最小高度: 100px；增加盒子的最小高度 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;
    }

&lt;/style&gt;

&lt;!-- 语言: lang-html --&gt;

&lt;div class=&quot;tree&quot; align=&quot;center&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;div class=&quot;person child male&quot;&gt;
                &lt;div class=&quot;content&quot;&gt;
                    some familly name  
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;ul&gt;
                &lt;li&gt;
                    &lt;div class=&quot;person child male&quot;&gt;
                        &lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
                    &lt;/div&gt;              
                &lt;/li&gt;                   
            &lt;/ul&gt;       
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;!-- 结束代码片段 --&gt;

英文:

try this:

&lt;style&gt;
.tree &gt; 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: &#39;&#39;;
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: &#39;&#39;;
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;
}
&lt;/style&gt;

&lt;div class=&quot;tree&quot; align=&quot;center&quot;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;div class=&quot;person child male&quot;&gt;
&lt;div class=&quot;content&quot;&gt;
some familly name  
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;div class=&quot;person child male&quot;&gt;
&lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
&lt;/div&gt;              
&lt;/li&gt;                   
&lt;/ul&gt;       
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

答案3

得分: 1

当我使用元素检查器查看它时，我在ul中看到额外的padding-inline-start: 40px;，也许这是ul的默认样式。您可以选择删除它。为了使子元素居中，也许您可以使用display: flex。

尝试更改

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;
}

英文:

When I look at it using the element inspector, I see an additional padding-inline-start: 40px; in ul. Perhaps this is the default style for ul. You can choose to remove it. To make the child centered, maybe you can use display: flex

Try changing

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;
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

不良的显示偏移

问题

答案1

答案2

答案3

Attribute changes with MutationObserver only found if code is inside a loop

如何在 EJS 模板中渲染一个对象

如何调整网格中单元格的高度？

如果一个 Fieldset 嵌套在另一个 Fieldset 中，屏幕阅读器应该如何访问 Legends？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论