Html 需要帮助定位这些分区。。。_Html_Css_Css Position

Html 需要帮助定位这些分区。。。

html css

Html 需要帮助定位这些分区。。。,html,css,css-position,Html,Css,Css Position,我正在制作一个“从站点框获取链接”，但我似乎无法正确定位这些div。在大多数情况下，他们是正确的，但我希望标题死在中间，“获取链接”按钮与搜索框对齐，搜索框更向右。我已经摆弄了大约45分钟，在w3上研究定位，但我就是搞不懂。任何提示都会有帮助这是我的名字 HTML 按钮默认设置为display:inline block，这会导致按钮掉落且与其他元素不对齐，我已在此小提琴中将其设置为display:block：我还为按钮提供了与textarea相同的页边距顶部，textarea本身具有浮动：

我正在制作一个“从站点框获取链接”，但我似乎无法正确定位这些div。在大多数情况下，他们是正确的，但我希望标题死在中间，“获取链接”按钮与搜索框对齐，搜索框更向右。我已经摆弄了大约45分钟，在w3上研究定位，但我就是搞不懂。任何提示都会有帮助

这是我的名字

HTML

按钮默认设置为

display:inline block

，这会导致按钮掉落且与其他元素不对齐，我已在此小提琴中将其设置为

display:block

：

我还为按钮提供了与textarea相同的页边距顶部，textarea本身具有

浮动：右侧

和

页边距右侧：10%

，您可以根据需要自定义它。

所以我做了一些事情。现在就把它们列出来：

我又加了一个包装纸
我冒昧地用类替换了你的ID
我已经在那里对代码进行了注释，以显示框阴影。我喜欢它们而不是边框，因为
```
框大小
```
和边框对框模型的影响
因为眼睛疼，我换了颜色

我在这里利用了几个属性，最显著的是

float:left，文本对齐：居中，和显示：内联块


注意：当屏幕尺寸变小时，这确实有一个相当难看的故障。响应性不在最初的问题或范围内。（如有要求，可添加）





获取链接！
获取链接！
您可以试试这个，参考小提琴：

做了很多代码重构：我建议你研究一下float
和不同的display
属性是如何工作的。看看这个。快速问题：您希望每个元素如何相互垂直对齐？同样高？米德尔斯？底部？我希望它们的高度相同，水平排列在一个理想的位置。我只是一直不擅长决定放东西的位置，然后当我尝试吸css位置时，几乎完成了。对不起，我必须离开桌子。不要删除这个问题！我不会为了将来帮助任何人而永远坚持下去！哇，你做了很多！谢谢你的帮助，如果我想提高的话，我真的需要把这类事情弄下来。无论如何，我要表达我的谢意：这看起来真的很好！但它与我所建站点的其他部分不太匹配。不过我很感激你的努力：没有问题！可以看到网站的其余部分，但我希望你找到了你想要的！祝你好运，伙计
<body>
    <div id="top_con">
        <div id="title_con">
            <a href="swfs/welcomeflash.swf" id="downLink" download="welcomeflash">
                <header id="title">
                    Diff Lirl
                </header>
            </a>
        </div>
        <div id="share_con">
            <button id="share">Get a link!</button>
            <textarea id="link"></textarea>
        </div>
    </div>
</body>

html {
    height: 100%;
}

body {
    background-color: black;
    height: 100%;
    margin: 0;
    padding: 0;
}

header {
    margin: 0 auto;
}

#top_con {
    width: 100%;
    display: inline-block;
}

#share_con {
    float: right;
    width: 40%;
    display: inline-block;
}

#link {
    width: 50%;
    resize: none;
    margin-top: 3%;
}

#share {}

#title_con {
    width: 57%;
    float: center;
    display: inline-block;
}

#title {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 48px;
    text-align: right;
    color: white;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: white;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #ccc;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

* {
  box-shadow: 0 0 15px 1px rgba(255, 0, 0, 0.4) inset, 0 0 0 1px rgba(0, 0, 255, 0.5);
}

.top_con {
  text-align: center;
}

.inner_con {
  display: inline-block;
}

.share_con {
  padding: 1em;
  display: inline-block;
}

.share_con,
.title_con {
  float: left;
  position: relative;
}

.title {
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 48px;
  color: white;
  cursor: pointer;
  margin: 0 1em;
}

.hide_my_ass {
  visibility: hidden;
}

.share {
  vertical-align: middle;
}

.link {
  vertical-align: middle;
}

<body>
  <div class="top_con">
    <div class="inner_con">
      <div class="share_con hide_my_ass">
        <button class="share">Get a link!</button>
        <textarea class="link"></textarea>
      </div>
      <div class="title_con">
        <a href="#" class="downLink">
          <header class="title">
            Diff Lirl
          </header>
        </a>

      </div>
      <div class="share_con">
        <button class="share">Get a link!</button>
        <textarea class="link"></textarea>
      </div>
    </div>
  </div>
</body>