Question

我刚刚开始编码，我正在尝试按照提交按钮按照文本行“你可以通过单击......来通过他在Upwork上的自由职业者投资组合联系Armando”，但是我无法弄清楚。请帮忙。

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.profile-id {
  margin-left: 1075px;
  position: center;
}

<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

<div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#projects">Projects</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<header>
  <p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
</header>

<style>
  body {
    margin: 0;
    padding: 0;
    position: absolute;
    font-family: 'Bungee Inline';
    background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
    background-repeat: no-repeat;
    background-position: center top, 100% 300px, 10% 870px;
    background-size: 100% 380px, 40%, 40%;
  }
</style>

<p style="margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software
  development, Armando hopes to build NWDS and make a breakout appearence in the software scene.
  <br></br>
  @JadeCoder
</p>

<p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> You can contact Armando through his freelance portfolio on Upwork by clicking
  <form action="https://www.upwork.com/fl/armandofrias" target="_blank">
    <input class="profile-id" type="submit" value="Here" />.</p>
</form>

Answer 1

试试这个

<form action="https://www.upwork.com/fl/armandofrias" target="_blank">
<span style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> You can contact Armando through his freelance portfolio on Upwork by clicking</span><input class="profile-id" type="submit" value="Here" />.

Answer 2

表单和段落是块元素。这就是为什么他们出现在不同的＆＃34;线＆＃34;。

我建议

p, form : {
    display: inline-block;
}

Answer 3

首先，你不能在“p”元素中放置“form”元素，而只是使用“a”标签 -

<p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;">
    You can contact Armando through his freelance portfolio on Upwork by clicking
    <a href="https://www.upwork.com/fl/armandofrias" target="_blank">Here</a>
    <!--<form action="https://www.upwork.com/fl/armandofrias" target="_blank">
        <input class="profile-id" type="submit" value="Here" />.
    </form>-->
</p>

Answer 4

将p的开头标记放在form标记

中

<form action="https://www.upwork.com/fl/armandofrias" target="_blank">
    <p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> 
    You can contact Armando through his freelance portfolio on Upwork by clicking
    <input class="profile-id" type="submit" value="Here" />.</p>
</form>

Answer 5

只需将您的代码更改为此。

HTML

<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

    <div class="topnav" id="myTopnav">
      <a href="#home">Home</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>

    <header>
      <p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
    </header>

    <style>
      body {
        margin: 0;
        padding: 0;
        position: absolute;
        font-family: 'Bungee Inline';
        background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
        background-repeat: no-repeat;
        background-position: center top, 100% 300px, 10% 870px;
        background-size: 100% 380px, 40%, 40%;
      }
    </style>

    <p style="margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software
      development, Armando hopes to build NWDS and make a breakout appearence in the software scene.
      <br></br>
      @JadeCoder
    </p>

    <p style="margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;"> You can contact Armando through his freelance portfolio on Upwork by clicking
      <form action="https://www.upwork.com/fl/armandofrias" target="_blank">
        <input class="profile-id" type="submit" value="Here" />
    </form>.</p>

CSS

    .topnav {
      background-color: #333;
      overflow: hidden;
    }

    .topnav a {
      float: right;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 20px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }

    .topnav a.active {
      background-color: #4CAF50;
      color: white;
    }

    .profile-id {
      position: center;
    }

    form{
        display: inline;
    }

Answer 6

你有不匹配的元素。这是固定版本。我把文本放到表单中，这是HTML有效的。

.topnav{
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
.profile-id{
  position: center;
}     
form {
  display: inline-block;
}

<link href='//fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'>

   <div class="topnav" id="myTopnav">
    <a href="#home">Home</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    </div>

<header>
<p style="text-align: center; font-size: 48pt; margin-top: 3%;"> New Wave Design Studios</p>
</header>

<style>
  body {
    margin: 0;
    padding: 0;
    position: absolute;
    font-family: 'Bungee Inline';
    background-image: url(https://arielle.com.au/wp-content/uploads/2016/04/wave-photography-dark-2.jpg), url(http://imageshack.com/a/img922/4958/Ca6YSO.jpg), url(http://imageshack.com/a/img923/1588/duLIdx.png);
    background-repeat: no-repeat;
    background-position: center top, 100% 300px, 10% 870px;
    background-size: 100% 380px, 40%, 40%;
  }
</style>

  <p style= "margin: 10% 50% 10% 5%; font-size: 14pt; text-align: justified;"> NWDS set up shop in sunny So-Flo. The company was set up with the intention of coding an array of projects to prepare a strong, diverse portfolio for it's founder: Armando F III. With the knowledge from the FreeCodeCamp curriculum and a degree in software development, Armando hopes to build NWDS and make a breakout appearence in the software scene. 
    <br></br>
    @JadeCoder
</p>

<div style= "margin: 10% 5% 10% 50%; font-size: 14pt; text-align: justified;">
  <form action="https://www.upwork.com/fl/armandofrias" target="_blank">
    <label>You can contact Armando through his freelance portfolio on Upwork by clicking</label>
    <input class="profile-id" type="submit" value="Here">
    </form>
  </div>

如何让我的提交按钮跟随我的下面的文字

6 个答案: