html - Properly centering multiple variable-width children inside a variable width container -

-

i have copied simplified version of this code jsfiddle.

the code tree diagram written html , css. jsfiddle above looks good.

however, after playing around have discovered centering of nodes relative parents works if child same size or bigger parent.

i still new css, primary issue seems fact all <li> elements floated left.

consider this example, child smaller parent. because parent <li> floated left, child <li> gets floated left well.

how can fix this?

i think playing display set table , inline-table might help. setting display:inline-table ul elements , display:table anchor tags in combination margin: 0 auto seems work. 

/*now css*/  * {margin: 0; padding: 0;}    .tree ul {  	padding-top: 20px; position: relative;  	display: inline-table;  	transition: 0.5s;  	-webkit-transition: 0.5s;  	-moz-transition: 0.5s;  }    .tree li {  	float: left; text-align: center;  	list-style-type: none;  	position: relative;  	padding: 20px 5px 0 5px;  	text-align:center;  	transition: 0.5s;  	-webkit-transition: 0.5s;  	-moz-transition: 0.5s;      display: list-item;  }    /*we use ::before , ::after draw connectors*/    .tree li::before, .tree li::after{  	content: '';  	position: absolute; top: 0; right: 50%;  	border-top: 1px solid #ccc;  	width: 50%; height: 20px;  }  .tree li::after{  	right: auto; left: 50%;  	border-left: 1px solid #ccc;  }    /*we need remove left-right connectors elements without   siblings*/  .tree li:only-child::after, .tree li:only-child::before {  	display: none;  }    /*remove space top of single children*/  .tree li:only-child{ padding-top: 0;}    /*remove left connector first child ,   right connector last child*/  .tree li:first-child::before, .tree li:last-child::after{  	border: 0 none;  }  /*adding vertical connector last nodes*/  .tree li:last-child::before{  	border-right: 1px 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 add downward connectors parents*/  .tree ul ul::before{  	content: '';  	position: absolute; top: 0; left: 50%;  	border-left: 1px solid #ccc;  	width: 0; height: 20px;  }    .tree li a{  	border: 1px solid #ccc;  	padding: 5px 10px;  	text-decoration: none;  	color: #666;  	font-family: arial, verdana, tahoma;  	font-size: 11px;  	display: table;      margin: 0 auto;  	border-radius: 5px;  	-webkit-border-radius: 5px;  	-moz-border-radius: 5px;  	  	transition: 0.5s;  	-webkit-transition: 0.5s;  	-moz-transition: 0.5s;  }    /*time hover effects*/  /*we apply hover effect the lineage of element also*/  .tree li a:hover, .tree li a:hover+ul li {  	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;  }  /*connector styles on hover*/  .tree li a:hover+ul li::after,   .tree li a:hover+ul li::before,   .tree li a:hover+ul::before,   .tree li a:hover+ul ul::before{  	border-color:  #94a0b4;  }
<div class="tree">      <ul>          <li>              <a href="#">parent</a>              <ul>                  <li>                      <a href="#">child</a>                      <ul>                          <li>                              <a href="#">+</a>                          </li>                      </ul>                   </li>                  <li>                      <a href="#">child big</a>                      <ul>                          <li>                              <a href="#">+</a>                          </li>                      </ul>                  </li>                  <li>                      <a href="#">child bigger</a>                      <ul>                          <li>                              <a href="#">+</a>                              <ul>                                  <li>                                      <a href="#">lorem ipsum</a>                                  </li>                              </ul>                          </li>                      </ul>                  </li>                  <li>                      <a href="#">child big</a>                      <ul>                          <li>                              <a href="#">+</a>                              <ul>                                  <li>                                      <a href="#">lorem ipsum dolor sit amet</a>                                  </li>                              </ul>                          </li>                      </ul>                  </li>                    </ul>          </li>      </ul>  </div>

hope helps.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more