Question

我想知道CSS中的代码，所以我的两个不同的输入类型在每个监视器中是相同的。所以我有一个大输入类型，低于7个输入应该覆盖相同的宽度。它在我的17.3英寸显示器和fullhd中都很棒。但在其他人中，七项投入超过了第一项。这是代码：

export const asyncAction = (id) => async (dispatch, getState) => {
  const { auth } = getState()
  const config = {
    headers: {
      "access-token": auth["access-token"],
      "client": auth.client,
      "uid": auth.uid
    }
  }
  const request = await axios.get(`${API_URL}`, config)

  dispatch({ type: UPDATE_USER_ACCESS_TOKEN, payload: request})

  dispatch({ type: ANOTHER_ACTION, payload: request.data })
}

请帮助我，我看到每个论坛但我无法得到它。When its wrong, it looks like this

Answer 1

我认为根据您的情况，此解决方案应该有效：

// JavaScript to toggle text placeholder for small inputs
$('.smallText').on('input', function () {
 if ($(this).val().length) {
   $(this).parent().addClass('empty');
 } else {
   $(this).parent().removeClass('empty');
 }
});

.clearfix::before, .clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.container {
  padding: 10px;
}

.largeText, .smallText {
  padding: 5px;
  border: 1px solid #999;
  font-size: 16px;
  margin-bottom: 5px;
  box-sizing: border-box;
  outline: none;
}

.largeText {
  width: 100%;
}

.textWrapper {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 20%;
}

.textWrapper+.textWrapper {
  padding-left: 5px;
}

.textWrapper::before {
  content: 'small text...';
  display: block;
  padding: 5px;
  border: 1px solid #999;
  color: #777;
  font-family: Arial;
}

.textWrapper.empty::before {
  color: transparent;
}

.smallText {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 5px 10px 5px 5px;
  border: 0;
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input type="text" placeholder="large text..." class="largeText" />
  <div class="inner-container clearfix">
    <div class="textWrapper"><input type="text" class="smallText" /></div>
    <div class="textWrapper"><input type="text" class="smallText" /></div>
    <div class="textWrapper"><input type="text" class="smallText" /></div>
    <div class="textWrapper"><input type="text" class="smallText" /></div>
    <div class="textWrapper"><input type="text" class="smallText" /></div>
  </div>
</div>

Css - 输入大小不同的分辨率和屏幕大小

1 个答案: