Question

我做了一个时间选择器但是我有使数值成为中心的问题。

{{1}}

DEMO syntax changed

另外我使用固定高度和调节器，那可以吗？如果插入符号的字体大小被更改，那么它将会中断。

Answer 1

尝试在另一个div中分隔数字

  <div>
   <span>20</span>
  </div>

请参阅：https://codepen.io/navdeepsingh/pen/bvYRyM

Answer 2

假设您要将内容与输入的中心对齐

＆＃13;

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
             supported by Chrome and Opera */
}

.selector-wrap {
  width: 100%;
  border: 1px solid;
  display: flex;
  justify-content: space-evenly;
}

.selector-wrap>div {
  display: flex;
  align-items: center;
}

.selector-wrap>div .control-wrap {
  display: flex;
  flex-flow: column;
  margin: 0px 0px 0px 12px;
  justify-content: space-between;
  height: 40px;
  width: 18px;
}

.selector-wrap>div .control-wrap .caret-wrap {
  cursor: pointer;
  font-size: 9px;
  text-align: center;
  padding: 4px 0px;
  border-left: 1px solid;
  border-right: 1px solid;
}

.selector-wrap>div .control-wrap .caret-wrap:hover {
  background: #ddd;
}

.selector-wrap>div .control-wrap .caret-wrap:active {
  color: grey;
}

＆＃13;

<div class="selector-wrap">
  <div>
    <span>20</span>
  </div>
  <div>
    <div class="control-wrap">
      <div class="caret-wrap">
        <span class="caret">&#9650;</span>
      </div>

      <div class="caret-wrap">
        <span class="caret">&#9660;</span>
      </div>
    </div>
  </div>
  <div>
    <span>30</span>
  </div>
  <div>
    <div class="control-wrap">
      <div class="caret-wrap">
        <span class="caret">&#9650;</span>
      </div>

      <div class="caret-wrap">
        <span class="caret">&#9660;</span>
      </div>
    </div>
  </div>

  <div>
    <span>AM</span>
  </div>
</div>

＆＃13;

或者你可以使用bootstrap来获得相同的输出。示例如下。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<form class="form-row ">
  <div class="col-4">
    <input type="number" min="0" max="24" class="form-control text-center" placeholder="02">
  </div>
  <div class="col-4">
    <input type="number" min="0" max="59" class="form-control text-center" placeholder="20">
  </div>
  <div class="col-4">
    <select class="form-control">
      <option>AM</option>
      <option>PM</option>
    </select>
  </div>
</form>

＆＃13;

Answer 3

这是我如何在不添加任何额外标记的情况下执行此操作。我添加了注释来解释代码。

小提琴：https://jsfiddle.net/8ca885da/

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
                              supported by Chrome and Opera */
}

.selector-wrap {
   width: 100%;
   border: 1px solid;
   display: flex;
   justify-content: space-evenly;

> div {
  display: flex;
  align-items: center;

  .control-wrap {
    display: flex;
    flex-flow: column;

    /* margin: 0px 0px 0px 12px; */ 

    /* removed ABOVE line to add different margin later */

    justify-content: space-between;
    height: 40px;
    width: 18px;

    .caret-wrap {
      cursor: pointer;
      font-size: 9px;
      text-align: center;
      padding: 4px 0px;
      border-left: 1px solid;
      border-right: 1px solid;

      &:hover {
        background: #ddd;
      }

      &:active {
        color: grey;
      }
    }
  }
}
}


/* Changes start from here  */

.selector-wrap > div {
/* Makes the div cover all the space it can (which is 33% because there are 3 items. Previously it covered only the text and arrows so we had no space to move elements. */
    width: 100%; 
}

.control-wrap {
/* Pushes the arrows to the right side using the margin auto trick for 
flexbox */
    margin-left: auto; 
}

span {
 /* Gives the span 100% width to apply text align center.  */
 text-align: center;
 width: 100%;
 }

具有不同宽度列的响应式flexbox网格

3 个答案: