Question

我不知道该怎么办。我是新手，做我想做的简单的编码。我已经尝试了一切，包括display：inline和 display：inline Important;“。我正在尝试将提交按钮放在具有相同样式属性的同一行（蓝色，白色字词等）。请帮忙！

<form action="/action_page.php">
    <input type="textarea" name="firstname" placeholder="Enter your address 
    to determine if we buy in your neighborhood" style=
    "border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid #d6d4d4;
    border-right: 1px solid #d6d4d4;
    border-bottom: 1px solid #d6d4d4;
    border-left: 1px solid #d6d4d4;
    height: 52px;
    width: 618px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    color: #161616;
    line-height: 1.1;
    box-sizing: border-box;
    font-family: open sans;
    font-weight: 400;
    text-align: left;
    text-align-last: left;
    font-size: 16px;
    background-color: #fff;
    background-image: none;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(0,0,0,.5);">
    <input type="submit" value="Get Started" style="font-weight: 400; line- 
    height: 3.1;
    font-size: 13px;
    color: #ffffff;
    background-color: #12208e;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    height: 50px;
    width: 160px;
    padding-top: 0;
    padding-right: 14px;
    padding-bottom: 0;
    padding-left: 14px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    color: #fff;
    line-height: 1;
    box-sizing: border-box;
    font-family: open sans;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
    font-size: 20px;
    background-color: #12208e;
    background-image: none;
    overflow: hidden;
    text-shadow: 1px 1px 1px #000;">
</form>

Answer 1

很多原因导致代码出错。首先，要获得所需的布局，请添加一个环绕两个输入元素的div，如下所示：

<div class="form-row">
    <input type="textarea" name="firstname" placeholder="Enter your address to determine if we buy in your neighborhood" class="name-input">
    <input type="submit" value="Get Started" class="btn-submit">
</div>

将这些样式应用于该div，以使两个输入元素“显示在一行上”：

.form-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-weight: 400;
}

您在按钮的样式上也有一个拼写错误，即您有line- height: 3.1;，但是我删除了该行，因为您正用另一行的行高规则覆盖它。

html {
  font-family: open sans;
}

.form-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-weight: 400;
}

.name-input {
  border-radius: 4px;
  border: 1px solid #d6d4d4;
  height: 52px;
  width: 618px;
  padding: 15px;
  margin: 5px;
  color: #161616;
  line-height: 1.1;
  box-sizing: border-box;
  font-family: open sans;
  text-align: left;
  font-size: 16px;
  background-color: #fff;
  box-shadow: 0 0 0 rgba(0, 0, 0, .5);
}

.btn-submit {
  color: #ffffff;
  background-color: #12208e;
  border-radius: 5px;
  border: 0;
  height: 50px;
  width: 160px;
  padding: 0 14px;
  margin: 5px;
  color: #fff;
  line-height: 1;
  box-sizing: border-box;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  text-shadow: 1px 1px 1px #000;
}

<form action="/action_page.php">
  <div class="form-row">
    <input type="textarea" name="firstname" placeholder="Enter your address to determine if we buy in your neighborhood" class="name-input">
    <input type="submit" value="Get Started" class="btn-submit">
  </div>
</form>

注意 ：由于您要在这两个元素上设置固定宽度，因此它们不能在非常小的屏幕上一行显示，否则元素已添加到其中。

我强烈建议将您的CSS拆分为一个单独的CSS文件，如本代码段所示。它将使您更好地了解发生了什么。另外，如果您使用不错的IDE（代码编辑器），它也会为您带来这些错误。

以下是一些资源，您可以用来了解有关CSS和HTML的更多信息。祝你好运！

使用嵌入式显示

1 个答案: