不良的显示偏移

huangapple
go评论99阅读模式
英文:

Undesirable offset in the display

问题

我有以下用于绘制家谱树的CSS代码：

  1. .tree ul {
  2.   padding-top: 20px;
  3.   position: relative;
  4.   transition: all 0.5s;
  5.   -webkit-transition: all 0.5s;
  6.   -moz-transition: all 0.5s;
  7. }
  9. .tree li {
  10.   display: table-cell;
  11.   text-align: center;
  12.   vertical-align: top; /* 添加了这个 */
  13.   list-style-type: none;
  14.   position: relative;
  15.   /* padding 是 20px + border-top = 23px */
  16.   padding: 23px 5px 0 5px;
  17.   transition: all 0.5s;
  18.   -webkit-transition: all 0.5s;
  19.   -moz-transition: all 0.5s;
  20. }
  22. /* 使用 ::before 和 ::after 来绘制连接线 */
  24. .tree li::before,
  25. .tree li::after {
  26.   content: '';
  27.   position: absolute;
  28.   top: 0;
  29.   right: 50%;
  30.   border-top: 3px solid #ccc;
  31.   width: 50%;
  32.   height: 20px;
  33. }
  35. .tree li::after {
  36.   right: auto;
  37.   left: 50%;
  38.   border-left: 3px solid #ccc;
  39. }
  41. /* 从没有兄弟元素的元素中移除左右连接线 */
  43. .tree li:only-child::after,
  44. .tree li:only-child::before {
  45.   display: none;
  46. }
  48. /* 从单个子元素的顶部移除空白 */
  50. .tree li:only-child {
  51.   padding-top: 0;
  52. }
  54. /* 从第一个子元素中移除左连接线和从最后一个子元素中移除右连接线 */
  56. .tree li:first-child::before,
  57. .tree li:last-child::after {
  58.   border: 0 none;
  59. }
  61. /* 向最后的节点添加垂直连接线 */
  63. .tree li:last-child::before {
  64.   border-right: 3px solid #ccc;
  65.   border-radius: 0 5px 0 0;
  66.   -webkit-border-radius: 0 5px 0 0;
  67.   -moz-border-radius: 0 5px 0 0;
  68. }
  70. .tree li:first-child::after {
  71.   border-radius: 5px 0 0 0;
  72.   -webkit-border-radius: 5px 0 0 0;
  73.   -moz-border-radius: 5px 0 0 0;
  74. }
  76. /* 添加从父元素到子元素的垂直连接线 */
  78. .tree ul ul::before {
  79.   content: '';
  80.   position: absolute;
  81.   top: 0;
  82.   left: 50%;
  83.   border-left: 3px solid #ccc;
  84.   width: 0;
  85.   height: 20px;
  86. }
  88. .tree li .family {
  89.   position: relative;
  90. }
  92. /* 个人框 */
  94. .person {
  95.   border: 3px solid black;
  96.   padding: 10px;
  97.   min-width: 150px;
  98.   /* 增加框的最小高度 background-color: #FFFFFF; */
  99.   display: inline-block;
  100. }
  102. .person.female {
  103.   border-color: #F45B69;
  104.   top: 0px;
  105. }
  107. .person.male {
  108.   top: 0px;
  109.   border-color: #456990;
  110. }
  112. .person .content {
  113.   position: relative;
  114.   font-size: 16px;
  115.   text-align: center;
  116. }

总体来说，这个工作得很好，但不幸的是，在块的显示中出现了偏移。 举个简单的例子，以下HTML代码：

  1. <html>
  3. <HEAD>
  4. <title>家谱树</title>
  5. <link rel="stylesheet" href="styles.css">
  6. <META http-equiv="content-type" CONTENT="text/html; charset=UTF-8" />
  7. </HEAD>
  9. <body bgcolor="white" background="" vlink="peru" alink="peru" link="peru">
  11. <b>
  13. <div class="tree" align=center>
  14. 	<ul>
  15. 		<li>
  16. 			<div class="person child male">
  17. 				<div class="content">
  18. 					非常非常长的家庭名字
  19. 				</div>
  20. 			</div>
  21. 			<ul >
  22. 				<li>
  23. 					<div class="person child male">
  24. 						<div class="content">叔叔</div>
  25. 					</div>				
  26. 				</li>					
  27. 			</ul>		
  28. 		</li>
  29. 	</ul>
  30. </div>
  32. </body>
  34. </html>

生成以下显示：

不良的显示偏移

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

英文:

I have the following css code for drawing familly trees:

  1. .tree ul {
  2. padding-top: 20px;
  3. position: relative;
  4. transition: all 0.5s;
  5. -webkit-transition: all 0.5s;
  6. -moz-transition: all 0.5s;
  7. }
  8. .tree li {
  9. display: table-cell;
  10. text-align: center;
  11. vertical-align: top; /* added this */
  12. list-style-type: none;
  13. position: relative;
  14. /*the padding is 20px + border-top = 23px*/
  15. padding: 23px 5px 0 5px;
  16. transition: all 0.5s;
  17. -webkit-transition: all 0.5s;
  18. -moz-transition: all 0.5s;
  19. }
  20. /*We will use ::before and ::after to draw the connectors*/
  21. .tree li::before,
  22. .tree li::after {
  23. content: &#39;&#39;;
  24. position: absolute;
  25. top: 0;
  26. right: 50%;
  27. border-top: 3px solid #ccc;
  28. width: 50%;
  29. height: 20px;
  30. }
  31. .tree li::after {
  32. right: auto;
  33. left: 50%;
  34. border-left: 3px solid #ccc;
  35. }
  36. /*We need to remove left-right connectors from elements without 
  37. any siblings*/
  38. .tree li:only-child::after,
  39. .tree li:only-child::before {
  40. display: none;
  41. }
  42. /*Remove space from the top of single children*/
  43. .tree li:only-child {
  44. padding-top: 0;
  45. }
  46. /*Remove left connector from first child and 
  47. right connector from last child*/
  48. .tree li:first-child::before,
  49. .tree li:last-child::after {
  50. border: 0 none;
  51. }
  52. /*Adding back the vertical connector to the last nodes*/
  53. .tree li:last-child::before {
  54. border-right: 3px solid #ccc;
  55. border-radius: 0 5px 0 0;
  56. -webkit-border-radius: 0 5px 0 0;
  57. -moz-border-radius: 0 5px 0 0;
  58. }
  59. .tree li:first-child::after {
  60. border-radius: 5px 0 0 0;
  61. -webkit-border-radius: 5px 0 0 0;
  62. -moz-border-radius: 5px 0 0 0;
  63. }
  64. /*Time to add downward connectors from parents*/
  65. .tree ul ul::before {
  66. content: &#39;&#39;;
  67. position: absolute;
  68. top: 0;
  69. left: 50%;
  70. border-left: 3px solid #ccc;
  71. width: 0;
  72. height: 20px;
  73. }
  74. .tree li .family {
  75. position: relative;
  76. }
  77. /* Person */
  78. .person {
  79. border: 3px solid black;
  80. padding: 10px;
  81. min-width: 150px;
  82. /* min-height: 100px ;
  83. to increase the min height of the boxes background-color: #FFFFFF; */
  84. display: inline-block;
  85. }
  86. .person.female {
  87. border-color: #F45B69;
  88. top: 0px
  89. }
  90. .person.male {
  91. top: 0px;
  92. border-color: #456990;
  93. }
  94. .person .content {
  95. position: relative; 	
  96. font-size: 16px;
  97. text-align: center;
  98. }

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

  1. &lt;html&gt;
  2. &lt;HEAD&gt;
  3. &lt;title&gt; Family tree &lt;/title&gt;
  4. &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
  5. &lt;META http-equiv=&quot;content-type&quot; CONTENT=&quot;text/html; charset=UTF-8&quot; /&gt;
  6. &lt;/HEAD&gt;
  7. &lt;body bgcolor=&quot;white&quot; background=&quot;&quot; vlink=&quot;peru&quot; alink=&quot;peru&quot; link=&quot;peru&quot;&gt;
  8. &lt;b&gt;
  9. &lt;div class=&quot;tree&quot; align=center&gt;
  10. &lt;ul&gt;
  11. &lt;li&gt;
  12. &lt;div class=&quot;person child male&quot;&gt;
  13. &lt;div class=&quot;content&quot;&gt;
  14. some very very big familly name
  15. &lt;/div&gt;
  16. &lt;/div&gt;
  17. &lt;ul &gt;
  18. &lt;li&gt;
  19. &lt;div class=&quot;person child male&quot;&gt;
  20. &lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
  21. &lt;/div&gt;				
  22. &lt;/li&gt;					
  23. &lt;/ul&gt;		
  24. &lt;/li&gt;
  25. &lt;/ul&gt;
  26. &lt;/div&gt;
  27. &lt;/body&gt;
  28. &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=&quot;padding: 0;&quot;添加到你的第二个&lt;ul&gt;，就像这样：&lt;ul style=&quot;padding: 0;&quot;&gt;。

英文:

Try to add style=&quot;padding: 0;&quot; to your second &lt;ul&gt;

like : &lt;ul style=&quot;padding: 0;&quot;&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. tree ul {
  2. padding-top: 20px;
  3. position: relative;
  4. transition: all 0.5s;
  5. -webkit-transition: all 0.5s;
  6. -moz-transition: all 0.5s;
  7. }
  8. .tree li {
  9. display: table-cell;
  10. text-align: center;
  11. vertical-align: top; /* added this */
  12. list-style-type: none;
  13. position: relative;
  14. /*the padding is 20px + border-top = 23px*/
  15. padding: 23px 5px 0 5px;
  16. transition: all 0.5s;
  17. -webkit-transition: all 0.5s;
  18. -moz-transition: all 0.5s;
  19. }
  20. /*We will use ::before and ::after to draw the connectors*/
  21. .tree li::before,
  22. .tree li::after {
  23. content: &#39;&#39;;
  24. position: absolute;
  25. top: 0;
  26. right: 50%;
  27. border-top: 3px solid #ccc;
  28. width: 50%;
  29. height: 20px;
  30. }
  31. .tree li::after {
  32. right: auto;
  33. left: 50%;
  34. border-left: 3px solid #ccc;
  35. }
  36. /*We need to remove left-right connectors from elements without 
  37. any siblings*/
  38. .tree li:only-child::after,
  39. .tree li:only-child::before {
  40. display: none;
  41. }
  42. /*Remove space from the top of single children*/
  43. .tree li:only-child {
  44. padding-top: 0;
  45. }
  46. /*Remove left connector from first child and 
  47. right connector from last child*/
  48. .tree li:first-child::before,
  49. .tree li:last-child::after {
  50. border: 0 none;
  51. }
  52. /*Adding back the vertical connector to the last nodes*/
  53. .tree li:last-child::before {
  54. border-right: 3px solid #ccc;
  55. border-radius: 0 5px 0 0;
  56. -webkit-border-radius: 0 5px 0 0;
  57. -moz-border-radius: 0 5px 0 0;
  58. }
  59. .tree li:first-child::after {
  60. border-radius: 5px 0 0 0;
  61. -webkit-border-radius: 5px 0 0 0;
  62. -moz-border-radius: 5px 0 0 0;
  63. }
  64. /*Time to add downward connectors from parents*/
  65. .tree ul ul::before {
  66. content: &#39;&#39;;
  67. position: absolute;
  68. top: 0;
  69. left: 50%;
  70. border-left: 3px solid #ccc;
  71. width: 0;
  72. height: 20px;
  73. }
  74. .tree li .family {
  75. position: relative;
  76. }
  77. /* Person */
  78. .person {
  79. border: 3px solid black;
  80. padding: 10px;
  81. min-width: 150px;
  82. /* min-height: 100px ;
  83. to increase the min height of the boxes background-color: #FFFFFF; */
  84. display: inline-block;
  85. }
  86. .person.female {
  87. border-color: #F45B69;
  88. top: 0px
  89. }
  90. .person.male {
  91. top: 0px;
  92. border-color: #456990;
  93. }
  94. .person .content {
  95. position: relative;   
  96. font-size: 16px;
  97. text-align: center;
  98. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;tree&quot; align=center&gt;
  2. &lt;ul&gt;
  3. &lt;li&gt;
  4. &lt;div class=&quot;person child male&quot;&gt;
  5. &lt;div class=&quot;content&quot;&gt;
  6. some familly name  
  7. &lt;/div&gt;
  8. &lt;/div&gt; 
  9. &lt;ul style=&quot;padding: 0;&quot;&gt;
  10. &lt;li&gt;
  11. &lt;div class=&quot;person child male&quot;&gt;
  12. &lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
  13. &lt;/div&gt;              
  14. &lt;/li&gt;                   
  15. &lt;/ul&gt;       
  16. &lt;/li&gt;
  17. &lt;/ul&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

尝试这个：

  1. &lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;
  3. &lt;!-- 语言: lang-css --&gt;
  5. &lt;style&gt;
  6.     .tree &gt; ul {
  7.         padding-top: 20px;
  8.         position: relative;
  9.         transition: all 0.5s;
  10.         -webkit-transition: all 0.5s;
  11.         -moz-transition: all 0.5s;
  12.     }
  14.     .tree ul li ul {
  15.         position: relative;
  16.         padding: 20px 0 0 0;
  17.     } 
  19.     .tree li {
  20.         display: table-cell;
  21.         text-align: center;
  22.         vertical-align: top; /* 添加此行 */
  23.         list-style-type: none;
  24.         position: relative;
  25.         /* padding 是 20px + border-top = 23px */
  26.         padding: 23px 5px 0 5px;
  27.         transition: all 0.5s;
  28.         -webkit-transition: all 0.5s;
  29.         -moz-transition: all 0.5s;
  30.     }
  32.     /* 使用 ::before 和 ::after 绘制连接线 */
  34.     .tree li::before,
  35.     .tree li::after {
  36.         content: &#39;&#39;;
  37.         position: absolute;
  38.         top: 0;
  39.         right: 50%;
  40.         border-top: 3px solid #ccc;
  41.         width: 50%;
  42.         height: 20px;
  43.     }
  45.     .tree li::after {
  46.         right: auto;
  47.         left: 50%;
  48.         border-left: 3px solid #ccc;
  49.     }
  51.     /* 需要移除没有兄弟节点的元素的左右连接线 */
  53.     .tree li:only-child::after,
  54.     .tree li:only-child::before {
  55.         display: none;
  56.     }
  58.     /* 移除单个子节点的顶部间距 */
  60.     .tree li:only-child {
  61.         padding-top: 0;
  62.     }
  64.     /* 移除第一个子节点的左连接线和最后一个子节点的右连接线 */
  66.     .tree li:first-child::before,
  67.     .tree li:last-child::after {
  68.         border: 0 none;
  69.     }
  71.     /* 为最后的节点添加垂直连接线 */
  73.     .tree li:last-child::before {
  74.         border-right: 3px solid #ccc;
  75.         border-radius: 0 5px 0 0;
  76.         -webkit-border-radius: 0 5px 0 0;
  77.         -moz-border-radius: 0 5px 0 0;
  78.     }
  80.     .tree li:first-child::after {
  81.         border-radius: 5px 0 0 0;
  82.         -webkit-border-radius: 5px 0 0 0;
  83.         -moz-border-radius: 5px 0 0 0;
  84.     }
  86.     /* 从父元素添加向下的连接线 */
  88.     .tree ul ul::before {
  89.         content: &#39;&#39;;
  90.         position: absolute;
  91.         top: 0;
  92.         left: 50%;
  93.         border-left: 3px solid #ccc;
  94.         width: 0;
  95.         height: 20px;
  96.     }
  98.     .tree li .family {
  99.         position: relative;
  100.     }
  102.     /* 个人 */
  104.     .person {
  105.         border: 3px solid black;
  106.         padding: 10px;
  107.         min-width: 150px;
  108.         /* 最小高度: 100px；增加盒子的最小高度 background-color: #FFFFFF; */
  109.         display: inline-block;
  110.     }
  112.     .person.female {
  113.         border-color: #F45B69;
  114.         top: 0px
  115.     }
  117.     .person.male {
  118.         top: 0px;
  119.         border-color: #456990;
  120.     }
  122.     .person .content {
  123.         position: relative;   
  124.         font-size: 16px;
  125.         text-align: center;
  126.     }
  128. &lt;/style&gt;
  130. &lt;!-- 语言: lang-html --&gt;
  132. &lt;div class=&quot;tree&quot; align=&quot;center&quot;&gt;
  133.     &lt;ul&gt;
  134.         &lt;li&gt;
  135.             &lt;div class=&quot;person child male&quot;&gt;
  136.                 &lt;div class=&quot;content&quot;&gt;
  137.                     some familly name  
  138.                 &lt;/div&gt;
  139.             &lt;/div&gt;
  140.             &lt;ul&gt;
  141.                 &lt;li&gt;
  142.                     &lt;div class=&quot;person child male&quot;&gt;
  143.                         &lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
  144.                     &lt;/div&gt;              
  145.                 &lt;/li&gt;                   
  146.             &lt;/ul&gt;       
  147.         &lt;/li&gt;
  148.     &lt;/ul&gt;
  149. &lt;/div&gt;
  151. &lt;!-- 结束代码片段 --&gt;
英文:

try this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. &lt;style&gt;
  2. .tree &gt; ul {
  3. padding-top: 20px;
  4. position: relative;
  5. transition: all 0.5s;
  6. -webkit-transition: all 0.5s;
  7. -moz-transition: all 0.5s;
  8. }
  9. .tree ul li ul {
  10. position: relative;
  11. padding: 20px 0 0 0;
  12. } 
  13. .tree li {
  14. display: table-cell;
  15. text-align: center;
  16. vertical-align: top; /* added this */
  17. list-style-type: none;
  18. position: relative;
  19. /*the padding is 20px + border-top = 23px*/
  20. padding: 23px 5px 0 5px;
  21. transition: all 0.5s;
  22. -webkit-transition: all 0.5s;
  23. -moz-transition: all 0.5s;
  24. }
  25. /*We will use ::before and ::after to draw the connectors*/
  26. .tree li::before,
  27. .tree li::after {
  28. content: &#39;&#39;;
  29. position: absolute;
  30. top: 0;
  31. right: 50%;
  32. border-top: 3px solid #ccc;
  33. width: 50%;
  34. height: 20px;
  35. }
  36. .tree li::after {
  37. right: auto;
  38. left: 50%;
  39. border-left: 3px solid #ccc;
  40. }
  41. /*We need to remove left-right connectors from elements without 
  42. any siblings*/
  43. .tree li:only-child::after,
  44. .tree li:only-child::before {
  45. display: none;
  46. }
  47. /*Remove space from the top of single children*/
  48. .tree li:only-child {
  49. padding-top: 0;
  50. }
  51. /*Remove left connector from first child and 
  52. right connector from last child*/
  53. .tree li:first-child::before,
  54. .tree li:last-child::after {
  55. border: 0 none;
  56. }
  57. /*Adding back the vertical connector to the last nodes*/
  58. .tree li:last-child::before {
  59. border-right: 3px solid #ccc;
  60. border-radius: 0 5px 0 0;
  61. -webkit-border-radius: 0 5px 0 0;
  62. -moz-border-radius: 0 5px 0 0;
  63. }
  64. .tree li:first-child::after {
  65. border-radius: 5px 0 0 0;
  66. -webkit-border-radius: 5px 0 0 0;
  67. -moz-border-radius: 5px 0 0 0;
  68. }
  69. /*Time to add downward connectors from parents*/
  70. .tree ul ul::before {
  71. content: &#39;&#39;;
  72. position: absolute;
  73. top: 0;
  74. left: 50%;
  75. border-left: 3px solid #ccc;
  76. width: 0;
  77. height: 20px;
  78. }
  79. .tree li .family {
  80. position: relative;
  81. }
  82. /* Person */
  83. .person {
  84. border: 3px solid black;
  85. padding: 10px;
  86. min-width: 150px;
  87. /* min-height: 100px ;
  88. to increase the min height of the boxes background-color: #FFFFFF; */
  89. display: inline-block;
  90. }
  91. .person.female {
  92. border-color: #F45B69;
  93. top: 0px
  94. }
  95. .person.male {
  96. top: 0px;
  97. border-color: #456990;
  98. }
  99. .person .content {
  100. position: relative;   
  101. font-size: 16px;
  102. text-align: center;
  103. }
  104. &lt;/style&gt;

<!-- language: lang-html -->

  1. &lt;div class=&quot;tree&quot; align=&quot;center&quot;&gt;
  2. &lt;ul&gt;
  3. &lt;li&gt;
  4. &lt;div class=&quot;person child male&quot;&gt;
  5. &lt;div class=&quot;content&quot;&gt;
  6. some familly name  
  7. &lt;/div&gt;
  8. &lt;/div&gt;
  9. &lt;ul&gt;
  10. &lt;li&gt;
  11. &lt;div class=&quot;person child male&quot;&gt;
  12. &lt;div class=&quot;content&quot;&gt;Uncle&lt;/div&gt;
  13. &lt;/div&gt;              
  14. &lt;/li&gt;                   
  15. &lt;/ul&gt;       
  16. &lt;/li&gt;
  17. &lt;/ul&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 1

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

尝试更改

  1. tree ul {
  2.   padding-top: 20px;
  3.   position: relative;
  4.   transition: all 0.5s;
  5.   -webkit-transition: all 0.5s;
  6.   -moz-transition: all 0.5s;
  7. }

为

  1. .tree ul {
  2.   display: flex;
  3.   justify-content: center;
  4.   padding-top: 20px;
  5.   padding-inline-start: 0;
  6.   position: relative;
  7.   transition: all 0.5s;
  8.   -webkit-transition: all 0.5s;
  9.   -moz-transition: all 0.5s;
  10. }
英文:

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

  1. tree ul {
  2. padding-top: 20px;
  3. position: relative;
  4. transition: all 0.5s;
  5. -webkit-transition: all 0.5s;
  6. -moz-transition: all 0.5s;
  7. }

to

  1. .tree ul {
  2. display: flex;
  3. justify-content: center;
  4. padding-top: 20px;
  5. padding-inline-start: 0;
  6. position: relative;
  7. transition: all 0.5s;
  8. -webkit-transition: all 0.5s;
  9. -moz-transition: all 0.5s;
  10. }

huangapple
  • 本文由 发表于 2023年6月6日 17:22:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76413178.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定