所以我是html的新手,不像刚开始时那样,但绝对不先进:
假设您已经阅读标题,这是我的html代码



window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));

.socialButton {
  visibility: hidden;
}

.tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

center {
  left: 220px;
}

.vertical-menu {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 10px;
  left: 10px;
  margin-bottom: 30px;
  z-index: 1;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  pading: 12px;
  text-decoration: none;
  z-index: 2;
}

.vertical-menu a:hover {
  background-color: #ccc;
  z-index: 2;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
  z-index: 2;
}

html {
  height: 100%;
  text-indent: 2.0em;
  position: relative;
  left: 220px;
  margin-right: 220px;
  text-indent: 2.0em;
}

a {
  color: blue;
  text-shadow: 0px 0px black;
  text-decoration: none;
}

body {
  background-color: #72b368;
  color: white;
  text-shadow: 2px 2px black;
  font-size: 18;
  text-indent: 2.0em;
  height: 100%;
  margin: 0;
}

head {
  background-color: #72b368;
  color: orange;
  text-shadow: 2px 2px black;
  font-size: 18;
}

footer {
  background-color: black;
  color: darkred;
  font-size: 12;
  height: 20;
  text-indent: 0em;
  margin: 0;
  position: relative;
  left: -220px;
  right: 220px;
  margin-right: -220px;
  text-align: right;
  padding-right: 10px;
  padding-top: 4px;
}

h1 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 22;
}

h2 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 26;
}

h3 {
  color: orange;
  text-shadow: 2px 2px black;
  font-size: 26;
}

h4 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 30;
}

h5 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 34;
}

h6 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 38;
}

<center>
  <!--Header Title-->
  <h3>Insert Meaningless Contact Here</h3>
</center>
<b></b>
<p>Welcome to a meaningless contact page, with meaningless contacts on it, where you can contact the meaningless creature known as me.</p>
<!--Yes this is a joke-->
<div class="vertical-menu">
  <!--Side menu-->
  <a href="Page.html">Home</a>
  <a href="#" class="active">Contact Me</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
</div>
<div class="pusher">
  <!--Actual <body> content-->
  <hr></hr>
  <a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a>
  <br></br>
  <center>
    <a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-width="750" data-height="400">Tweets by TwitterDev</a>
  </center>
  <center>
    <!--More Content-->
    <h2>More content coming soon.</h2>
    <h1>(Always trying to add more stuff.)</h1>
  </center>
  <null>
    <!--Page breaks for footer-->
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
  </null>
</div>
<footer>
  <!--Copyright and other shit-->
  Site design by Matthew Rease. (c) 2017. Do not copy custom design without permission. To contact me, go to my YouTube channel listed above, and use the contact information there.
</footer>





抱歉,这么长了,我只是想展示所有这些,以防万一。
我进行了一些研究,但有一半时间我不了解其他人在说什么,另一半(当我这样做时)他们的解决方案不起作用。
我再也无法用语言解释我的结果了,但是这里有一个我“用照片购物”的例子
http://imgur.com/a/EqD8X
显然不一定要在同一地点,但我仅举一个例子。

在您指出.socialButton仅使其不可见(尽管即使它不起作用)之前,它是一个测试,基本上,我无法在.socialbutton {}块内运行任何东西,我已经尝试过诸如右之类的显而易见的事情:align-text:align-content:以及诸如此类,但不是很明显,问题在于让类应用特质
它应该使用该类的twitter-follow-button,然后使用我创建的一个名为socialButton的按钮。

有任何想法吗?建议?感谢所有帮助。

最佳答案

试试下面的代码。您可以添加带有分隔符的锚标记,然后将其右对齐。

<div align = "right"><a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a><div>

10-06 14:04