主页 / 问题 / 995013
Accepted
Frenc Olesov
Asked:2020-06-21 14:03:37 +0000 UTC2020-06-21 14:03:37 +0000 UTC

如何为输入中的文本设置内容宽度

  • 772

截屏

如截图所示，文本的表格宽度是必不可少的，我不知道如何设置。访问了通常的padding'i，触摸输入的宽度而不是其中文本的宽度。

输入所在的块中的 HTML 内容代码

.page-subscribe input {
  border: solid 2px #4265B7;
  border-radius: 50px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  background-color: transparent;
  width: 100%;
  display: block;
  padding: 25px 35px;
  color: #fff;
}
<div class="page-subscribe">
  <div class="wrap">
    <div class="page-subscribe-content">
      <h2><span>Subscribe</span>Signup For A Trail</h2>
      <p>Create your free account now & get 30 days free <br> trail No credit card required</p>
      <!-- Нужный элемент -->
      <input type="email" placeholder="Enter your email address">
      <!-- Нужный элемент -->
      <button class="btn-primary" type="submit">Subscribe</button>
    </div>
    <div class="page-subscribe-img">
      <img src="img/Robot.png" alt="Robot">
    </div>
  </div>
</div>

html

3 个回答

  1. Best Answer

    确定订阅按钮的宽度，在 CSS 中为这个按钮设置一个固定的大小，并且已经设置了输入padding-right: *ширина кнопки + желаемый отступ от неё*px;

    这是一个例子：

    .block {
  display: block;
  width: 100%;
  max-width: 220px;
  position: relative;
}

.block input[type="text"] {
  display: inline-block;
  width: 100%;
  height: 40px;
  border-radius: 40px;
  padding-left: 10px;
  padding-right: 85px; /* ширина кноки + желаемый отступ */
  text-overflow: '..'; /* необязательно */
  border: 2px solid green;
  box-sizing: border-box;
}

.block input[type="button"] {
  display: inline-block;
  width: 75px; /* ширина кнопки фиксирована */
  height: 32px;
  border-radius: 32px;
  border: 2px solid darkgreen;
  background: green;
  color: #fff;
  margin: 4px;
  position: absolute;
  top: 0; right: 0;
}
    <div class="block">
  <input type="text" value="bla-bla-bla-bla-bla-bla-bla">
  <input type="button" value="subscribe">
</div>

    • 2

  2. 不用担心。

    指定固定宽度！Width: 150px;

    并缩进其余部分padding

    width:150px;
padding-right:20px;

    或其他方式。

    <div class="m1">
   <input type="email"/>
</div>

    CSS：

    .m1{
width:100%;
}
.m1 > input{
width:90%;
padding-right:10%;
}
    • 0

  3. 我引入了最多 35 个字符的输入限制，这对我来说已经足够了。

    <div class="page-subscribe">
    <div class="wrap">
        <div class="page-subscribe-content">
            <h2><span>Subscribe</span>Signup For A Trail</h2>
            <p>Create your free account now & get 30 days free <br> trail No credit card required</p>
            <!-- Нужный элемент -->
            <input type="email" placeholder="Enter your email address" maxlength="35">
            <!-- Нужный элемент -->
            <button class="btn-primary" type="submit">Subscribe</button>
        </div>
        <div class="page-subscribe-img">
        <img src="img/Robot.png" alt="Robot">
        </div>
    </div>
</div>
    • 0

相关问题