CSS Org Chart水平线连接器

时间：2017-06-22 10:43:41

标签： html css3

我没有使用CSS获得正确的组织结构。线路连接器与节点元素不匹配。我不知道如何定位他们。的 JSFIDDLE

CSS代码

* {
  margin: 0;
  padding: 0;
}

.tree img {
  width: 75px;
}

.tree {
  width: 1994px;
}

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

.tree li {
  float: left;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

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

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

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

.tree li div:hover,
.tree li div:hover+ul li div {
  background: #c8e4f8;
  color: #000;
  !border: 1px solid #94a0b4;
}

.tree li div:hover + ul li::after,
.tree li div:hover + ul li::before,
.tree li div:hover + ul::before,
.tree li div:hover + ul ul::before {
  border-color: #94a0b4;
}

.emplist {
  width: 320px !important;
  height: 160px !important;
  border: 1px solid #aaa;
  border-radius: 5px;
  color: #333;
  transition: box-shadow 1s;
  position: relative;
  cursor: move;
}

.tree img {
  width: 55px;
  !height: 75px;
  margin: 0 auto;
}

.emplist h3,
.emplist p {
  padding: 5px 0px 0px 5px !important;
  margin: 0px !important;
}

.emplist:hover {
  box-shadow: 0 0 8px #000;
}

.emplist h3 {
  font-size: 14px;
}

.deptRow,
.infoRow {
  width: 100%;
  height: 20%;
  float: left;
  font-family: 'Rubik', sans-serif !important;
  color: #00aff0;
}

.detailsRow {
  float: left;
  width: 100%;
  height: 55%;
}

.detailsCol,
.imgCol,
.infoMore {
  float: left;
  height: 100%;
}

.detailsCol {
  width: 69%;
}

.imgCol {
  width: 30%;
}

.imgCol img {
  border: 1px solid #ccc;
  margin: 5px;
}

.infoMore,
.infoMoreR {
  width: 50%;
  font-size: 12px;
}

.R a {
  margin: 5px;
}

.empName {
  font-family: 'Josefin Sans', sans-serif;
}

.subTitle {
  !font-family: 'Bilbo', cursive;
  !text-align: right;
  padding-right: 20px;
  font-weight: 880px;
  font-family: 'Dekko', cursive;
}

HTML代码

<div id="" class="tree">
  <ul>
    <li>
      <div class='emplist'>
        <div class='deptRow'>
          <h3>Research & Development</h3>
        </div>
        <hr>
        <div class='detailsRow'>
          <div class='detailsCol'>
            <h3 class='empName'>Emp1</h3>
            <p class='subTitle'>Research & Development
              <br/>Hyderabad</p>
          </div>
          <div class='imgCol'><img src='' alt='abc' /></div>
        </div>
        <hr>
        <div class='infoRow'>
          <div class='infoMoreR pull-right text-right'>
            <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
          </div>
          <div class='infoMore'>
            <p id='leafCount'></p>
          </div>
        </div>
      </div>
      <ul>
        <li>
          <div class='emplist'>
            <div class='deptRow'>
              <h3>emp2</h3>
            </div>
            <hr>
            <div class='detailsRow'>
              <div class='detailsCol'>
                <h3 class='empName'></h3>
                <p class='subTitle'>Research & Development
                  <br>Hyderabad</p>
              </div>
              <div class='imgCol'><img src='' alt='abc' /></div>
            </div>
            <hr>
            <div class='infoRow'>
              <div class='infoMoreR pull-right text-right'>
                <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
              </div>
              <div class='infoMore'>
                <p id='leafCount'></p>
              </div>
            </div>
          </div>
          <ul>
            <li>
              <div class='emplist'>
                <div class='deptRow'>
                  <h3>Research & Development</h3>
                </div>
                <hr>
                <div class='detailsRow'>
                  <div class='detailsCol'>
                    <h3 class='empName'>emp2.1</h3>
                    <p class='subTitle'>Research & Development
                      <br>Hyderabad</p>
                  </div>
                  <div class='imgCol'><img src='' alt='abc' /></div>
                </div>
                <hr>
                <div class='infoRow'>
                  <div class='infoMoreR pull-right text-right'>
                    <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
                  </div>
                  <div class='infoMore'>
                    <p id='leafCount'></p>
                  </div>
                </div>
              </div>
              <ul>
                <li>
                  <div class='emplist'>
                    <div class='deptRow'>
                      <h3>Research & Development</h3>
                    </div>
                    <hr>
                    <div class='detailsRow'>
                      <div class='detailsCol'>
                        <h3 class='empName'>emp2.1.1</h3>
                        <p class='subTitle'>Research & Development
                          <br>Hyderabad</p>
                      </div>
                      <div class='imgCol'><img src='' alt='abc' /></div>
                    </div>
                    <hr>
                    <div class='infoRow'>
                      <div class='infoMoreR pull-right text-right'>
                        <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
                      </div>
                      <div class='infoMore'>
                        <p id='leafCount'></p>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class='emplist'>
                    <div class='deptRow'>
                      <h3>Research & Development</h3>
                    </div>
                    <hr>
                    <div class='detailsRow'>
                      <div class='detailsCol'>
                        <h3 class='empName'>emp2.1.2</h3>
                        <p class='subTitle'>Research & Development
                          <br>Hyderabad</p>
                      </div>
                      <div class='imgCol'><img src='' alt='abc' /></div>
                    </div>
                    <hr>
                    <div class='infoRow'>
                      <div class='infoMoreR pull-right text-right'>
                        <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
                      </div>
                      <div class='infoMore'>
                        <p id='leafCount'></p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
            <li>
              <div class='emplist'>
                <div class='deptRow'>
                  <h3>Research & Development</h3>
                </div>
                <hr>
                <div class='detailsRow'>
                  <div class='detailsCol'>
                    <h3 class='empName'>emp2.2</h3>
                    <p class='subTitle'>Research & Development
                      <br>Hyderabad</p>
                  </div>
                  <div class='imgCol'><img src='' alt='abc' /></div>
                </div>
                <hr>
                <div class='infoRow'>
                  <div class='infoMoreR pull-right text-right'>
                    <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
                  </div>
                  <div class='infoMore'>
                    <p id='leafCount'></p>
                  </div>
                </div>
              </div>
              <ul>
                <li>
                  <div class='emplist'>
                    <div class='deptRow'>
                      <h3>Research & Development</h3>
                    </div>
                    <hr>
                    <div class='detailsRow'>
                      <div class='detailsCol'>
                        <h3 class='empName'>emp2.2.1</h3>
                        <p class='subTitle'>Research & Development
                          <br>Hyderabad</p>
                      </div>
                      <div class='imgCol'><img src='' alt='abc' /></div>
                    </div>
                    <hr>
                    <div class='infoRow'>
                      <div class='infoMoreR pull-right text-right'>
                        <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
                      </div>
                      <div class='infoMore'>
                        <p id='leafCount'></p>
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class='emplist'>
                    <div class='deptRow'>
                      <h3>Research & Development</h3>
                    </div>
                    <hr>
                    <div class='detailsRow'>
                      <div class='detailsCol'>
                        <h3 class='empName'>emp2.2.2</h3>
                        <p class='subTitle'>Research & Development
                          <br>Hyderabad</p>
                      </div>
                      <div class='imgCol'><img src='' alt='abc' /></div>
                    </div>
                    <hr>
                    <div class='infoRow'>
                      <div class='infoMoreR pull-right text-right'>
                        <button id='btn_empModal' data-toggle='modal' class='btn btn-xs text-center'>info</button>
                      </div>
                      <div class='infoMore'>
                        <p id='leafCount'></p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

上述代码需要进行哪些更改。尽快回复我。

2 个答案:

答案 0 :(得分：1)

将此添加到您的CSS的最后一行。

div {
margin:0px auto;
}

问题是CSS中的边距设置为“0px”。考虑在必要时将margin-left和margin-right修改为“auto”。

答案 1 :(得分：1)

.emplist {
  width: 320px !important;
  height: 160px !important;
  border: 1px solid #aaa;
  border-radius: 5px;
  color: #333;
  transition: box-shadow 1s;
  position: relative;
  cursor: move;
}

将上面的类块替换为下面的

.emplist{
    width: 320px !important;
    height: 160px !important;
    border: 1px solid #aaa;
    border-radius: 5px;
    color: #333;
    transition: box-shadow 1s;
    position: relative;
    cursor: move;
    display: inline-block;    
}

只添加显示属性

相关问题
最新问题