问题：

包装中的中心表单[副本]

洪俊捷

2023-03-14

我一直试图将下面的表单放在包装器中，但似乎不起作用。我做错了什么？

在这里摆弄:https://jsfidle.net/wk40kdg5/2/。

HTML

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
<div class="row">
  <div class="col-md-12 centered">
    <div class="newsletter">
      <div class="wrapper">
        <form id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">
          <div class="newsletter--form">
            <div class="input-group">
              <label class="newsletter__label hidden-label" for="Email">Join our Family For Updates</label> &nbsp;
              <input class="input-group-field newsletter__input" id="Email" name="EMAIL" placeholder="Email Address" type="email" value=""> &nbsp;
              <span class="input-group-btn">
                  <button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe">
                    <span class="newsletter__submit-text--large">SUBSCRIBE</span>
              <span class="newsletter__submit-text--small">
                      <span class="icon icon-arrow-right" aria-hidden="true"></span>
              </span>
              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS

.newsletter {
  background: none;
}

.newsletter form {
  max-width: 720px;
}

.newsletter .newsletter__label {
  display: inline-block;
  font-family: 'Josefin Slab' !important;
  font-size: 18px;
  font-style: normal;
  height: 25px;
  line-height: 25px;
  padding: 2px 0;
  position: static;
  text-transform: uppercase;
  vertical-align: top;
  width: auto;
  letter-spacing: 1px;
}

.newsletter .newsletter__input {
  border: none;
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 17px;
  font-style: normal;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
  vertical-align: bottom;
  width: 250px;
  text-transform: uppercase;
  font-family: Ubuntu !important;
  padding: 2px 0;
}

.newsletter .newsletter__input:not(:root:root) {
  padding: 0;
}

.input-group-field,
.input-group-btn {
  vertical-align: bottom;
  width: auto;
  padding-top: 5px;
}

.newsletter .input-group .btn,
.newsletter .input-group .btn--secondary,
.newsletter .input-group .input-group-field {
  font-family: Ubuntu !important;
}

.newsletter .input-group .input-group-field {
  font-family: Ubuntu !important;
  height: 25px;
  letter-spacing: 1px;
}

.newsletter .input-group .input-group-field:focus {
  outline: none;
}

.newsletter .input-group .btn {
  border: medium none;
  line-height: normal !important;
  padding: 0 12px !important;
  vertical-align: top;
  height: 20px;
  margin: 0;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  -webkit-transition: background-color 0.15s ease-out;
  -moz-transition: background-color 0.15s ease-out;
  -ms-transition: background-color 0.15s ease-out;
  -o-transition: background-color 0.15s ease-out;
  transition: background-color 0.15s ease-out;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 13px !important;
}

.newsletter .input-group .btn:hover {
  opacity: 0.8;
}

.newsletter .newsletter__input::-webkit-input-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input:-moz-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input::-moz-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input:-ms-input-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input::-ms-input-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .input-group-field,
.newsletter .input-group-btn {
  display: inline-block;
  vertical-align: top;
}

共有3个答案

哈栋

2023-03-14

将边距自动添加到表单声明：

.newsletter form {
  max-width: 720px;
  margin: auto;
}

胡意致

2023-03-14

应该为表单元素添加width而不是max-width,可以是固定的,也可以是百分比的。还需要添加“margin：auto”

例如：

.newsletter form{
   width: 30%;
   margin: auto;
}

阚夕

2023-03-14

在表单标记中添加margin:auto将解决您想要的问题。

null

.newsletter {
  background: none;
}

.newsletter form {
  max-width: 720px;
}

.newsletter .newsletter__label {
  display: inline-block;
  font-family: 'Josefin Slab' !important;
  font-size: 18px;
  font-style: normal;
  height: 25px;
  line-height: 25px;
  padding: 2px 0;
  position: static;
  text-transform: uppercase;
  vertical-align: top;
  width: auto;
  letter-spacing: 1px;
}

.newsletter .newsletter__input {
  border: none;
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 17px;
  font-style: normal;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
  vertical-align: bottom;
  width: 250px;
  text-transform: uppercase;
  font-family: Ubuntu !important;
  padding: 2px 0;
}

.newsletter .newsletter__input:not(:root:root) {
  padding: 0;
}

.input-group-field,
.input-group-btn {
  vertical-align: bottom;
  width: auto;
  padding-top: 5px;
}

.newsletter .input-group .btn,
.newsletter .input-group .btn--secondary,
.newsletter .input-group .input-group-field {
  font-family: Ubuntu !important;
}

.newsletter .input-group .input-group-field {
  font-family: Ubuntu !important;
  height: 25px;
  letter-spacing: 1px;
}

.newsletter .input-group .input-group-field:focus {
  outline: none;
}

.newsletter .input-group .btn {
  border: medium none;
  line-height: normal !important;
  padding: 0 12px !important;
  vertical-align: top;
  height: 20px;
  margin: 0;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  -webkit-transition: background-color 0.15s ease-out;
  -moz-transition: background-color 0.15s ease-out;
  -ms-transition: background-color 0.15s ease-out;
  -o-transition: background-color 0.15s ease-out;
  transition: background-color 0.15s ease-out;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 13px !important;
}

.newsletter .input-group .btn:hover {
  opacity: 0.8;
}

.newsletter .newsletter__input::-webkit-input-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input:-moz-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input::-moz-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input:-ms-input-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .newsletter__input::-ms-input-placeholder {
  color: #cbcbcb;
  opacity: 0.5;
}

.newsletter .input-group-field,
.newsletter .input-group-btn {
  display: inline-block;
  vertical-align: top;
}
#mc-embedded-subscribe-form {
  margin:auto
}

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
<div class="row">
  <div class="col-md-12 centered">
    <div class="newsletter">
      <div class="wrapper">
        <form id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">
          <div class="newsletter--form">
            <div class="input-group">
              <label class="newsletter__label hidden-label" for="Email">Join our Family For Updates</label> &nbsp;
              <input class="input-group-field newsletter__input" id="Email" name="EMAIL" placeholder="Email Address" type="email" value=""> &nbsp;
              <span class="input-group-btn">
                  <button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe">
                    <span class="newsletter__submit-text--large">SUBSCRIBE</span>
              <span class="newsletter__submit-text--small">
                      <span class="icon icon-arrow-right" aria-hidden="true"></span>
              </span>
              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

类似资料：

用FOP中的长单词在表单元格中包装

我在FOP中有一个表，它工作得很好，直到我得到一个很长的单词。然后，该单词会覆盖表格中结束的单元格。我在表格单元格和/或单元格块中尝试了wrap-option="wrap ",但它不起作用因为我想只显示位太复杂了，这里是完整的xsl文件：单元格数据4存在问题……比如一次255个数字或字符，没有连字符或空格。输入来自数据库，但可能如下所示：结果应该是如下表格：在单元4中依此类推现在上面的
礼包中心

游戏信息 H5游戏：http://f2e.duowan.com/s/lib/mobile/gamesInfo.js APP游戏：http://f2e.duowan.com/s/lib/mobile/h5gamesInfo.js
Java中的包装类和泛型说明[副本]

在下面的代码中，行显示为false。但是当我们再次比较另一个整数包装类时，它返回true。为什么包装器类的比较在第一种情况下是false，而在第二种情况下是true？
工单中心

1、接口声明在调用接口时必须在https请求的header中携带"token"参数。 token是智齿客服接口开放平台全局唯一的接口调用凭据。开发者在调用各业务接口时都需使用token，开发者需要进行妥善保存。token的存储至少要保留32个字符空间。token的有效期目前为24个小时，需定时刷新，或根据接口返回的token失效提示，进行重新获取。请求token接口，无论token是否存在，都
中心表单提交按钮HTML / CSS

问题内容：我在将CSS表单的HTML表单提交按钮居中时遇到麻烦。现在我正在使用：这个CSS内容而且它什么也没做。我知道我可能在做一些愚蠢的错误。我怎样才能解决这个问题？问题答案：我只是将div包裹在它们周围，并使其居中对齐。那么您不需要按钮上的任何CSS即可将它们居中。
6、工单中心

本章主要讲述智齿客服系统中，工单中心业务模块的全部介绍，将以工单管理员和工单客服两个角色来进行讲解。 6.1 工单管理员作为工单客服的管理员，以下内容会介绍在客服系统中对工单客服成员管理、客服业务设置、工单客服数据统计等功能。 6.1.1 客服成员管理支持创建工单客服、工单客服信息变更、创建工单组、权限配置等功能创建工单客服（1）点击设置-客服管理-客服列表>>客服列表>>单击添加客服。

包装中的中心表单[副本]

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档