Question

所以，这是我的问题。我正在尝试创建一个电子邮件签名创建者，我正在编写我的代码，但它表现得很奇怪，并且放入一个我不理解的奇怪间距。我尝试更改浮动和显示，但我不能，因为它必须显示内联，如果它没有向右浮动，那么它不能正确定位。到目前为止，这是我的代码：

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div id = "allBody">
  <div id = "image">
    <img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image">
  </div>
  <div id = "fullName">Billy Staples</div>
  <div id = "job"><i>Programmer</i></div>
  <div id = "line"></div>
</div>

CSS

#allBody {
  display: inline-block;
}
#image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-right: 15px;
  display: inline;
}
#line {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
  margin-right: 25px;
  display: inline;
  float: right;
}
#fullName {
  display: inline;
  float: right;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 24px;
  color: orange;
  }
#job {
  display: inline;
  float: right;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  padding-top: 40px;
  }

基本上，我想要的是让名字（Billy Staples）成为工作的旁边（程序员），这样它看起来就像没有那种令人尴尬的标签看起来之前的东西了名称文字。

可以找到此代码的工作版本here。

我相信如果我要使用一张桌子这可能是可能的，但我还没有完全理解桌子的位置，我不是很擅长它们。如果你确实相信这个代码会通过使用表来改进，那么如果你能添加一个我可以遵循的例子，我将不胜感激。直到我掌握了它。

Answer 1

我能想到的最快的方法是1行css负边距（如果这不是你想要的，请澄清，因为我不能100％确定你想要的输出）：

#allBody {
  display: inline-block;
}

#image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-right: 15px;
  display: inline;
}

#line {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
  margin-right: 25px;
  display: inline;
  float: right;
}

#fullName {
  display: inline;
  float: right;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 24px;
  color: orange;
  /* new (tweak value to your benefit) */
  margin-left: -86px;
}

#job {
  display: inline;
  float: right;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  padding-top: 40px;
}

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div id="allBody">
  <div id="image">
    <img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
  </div>
  <div id="fullName">Billy Staples</div>
  <div id="job"><i>Programmer</i></div>
  <div id="line"></div>
</div>

或全部内联：

#allBody {
    display: inline-block;
}

#image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-right: 15px;
    display: inline;
}

#line {
    height: 200px;
    width: 7.5px;
    border-radius: 20px;
    border: none;
    background-color: cornflowerBlue;
    margin-right: 25px;
    display: inline;
    float: right;
}

#fullName {
    display: inline;
    float: right;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    color: orange;
}

#job {
    display: inline;
    float: right;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    /*padding-top: 40px;*/
    line-height: 2.2;
}

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div id="allBody">
    <div id="image">
        <img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
    </div>
    <div id="fullName">Billy Staples</div>
    <div id="job"><i>Programmer&nbsp;&nbsp;&nbsp;</i> </div>
    <div id="line"></div>
</div>

无法更改文本间距和浮动以更改文本位置

1 个答案: