Question

所以我在html中创建了一个段控件：

<div id="jobboard-segment-control">
        <ul id="segmented-control" class="segmented-control">
            <li id="1"><a>1</a></li>
            <li id="2"><a>2</a></li>
            <li id="3"><a>3</a></li>
        </ul>
</div>

现在我尝试将其设置为当用户点击其中一个片段时，该片段会改变颜色并且也会变大（高度）。到目前为止，一切都发生了，除了所选的部分在高度上向下增长而不是从顶部和底部均匀增长。有没有办法让片段从顶部和底部均匀生长？或者在高度增长后居中？

这是css：

.segmented-control {
background-color: #fff;
list-style-type: none;
width: 252px;
height: 26px;
margin-top: 8px;
padding: 0px;
float: left;
display: table-row;
/*margin: 0 auto;*/

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.segmented-control li {
cursor: pointer;
background-color: #000;
float: left;
margin-left: 1px;
height: 26px;
}

.segmented-control li.selected {
    /*background-color: #27688e;*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 32px;
    border: 1px solid #579bc0;   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#579bc0), color-stop(100%,#27688e));   
}

这是click事件的js。它只是从li中删除所选的类，并将其添加到单击的类中：

    $('li').removeClass('selected');
    $(this).addClass('selected');

Answer 1

如果我没有遗漏某些内容，您只需为所选课程申请margin-top:-3px;（添加身高/ 2 ）。

＆＃13;

$("li").click(function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});

＆＃13;

.segmented-control {
  position: relative;
  background-color: #fff;
  list-style-type: none;
  width: 252px;
  height: 32px;
  margin-top: 8px;
  padding: 0px;
  float: left;
  display: table-row;
  /*margin: 0 auto;*/
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.segmented-control li {
  cursor: pointer;
  background-color: #000;
  float: left;
  margin-left: 1px;
  width: 10px;
  height: 26px;
}
.segmented-control li.selected {
  margin-top: -3px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 32px;
  border: 1px solid #579bc0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #579bc0), color-stop(100%, #27688e));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="jobboard-segment-control">
  <ul id="segmented-control" class="segmented-control">
    <li id="1"><a>1</a>

    </li>
    <li id="2"><a>2</a>

    </li>
    <li id="3"><a>3</a>

    </li>
  </ul>
</div>

＆＃13;

如何在段控件中居中li元素？

1 个答案: