将项目水平并排放置HTML

时间:2018-07-26 20:02:01

标签: html css

好的,这是到目前为止的设置方式。

  **<h2>Data Search</h2>**
  <p>This tool does this and that</p>
  <p>To begin your search, do this.
  </p>
  <div class="row">
  <div class="col-sm-12">
  <h1>Data Search</h1><a name="ds"></a>
  </div>

我需要在该部分的右边和后面(或第1行)直接放置一个带有**的按钮。这将是我唯一需要这样做的时间,因此这就是为什么我没有对.css进行编辑的原因。是否有基于HTML的解决方案?

我尝试过向右浮动,但似乎无法弄清楚将其放置在此处的位置。

4 个答案:

答案 0 :(得分:2)

您可以将<nav class="site-nav"> <div class="container"> <div class="nav-logo"> <img src="assets/frontend/img/logo.png" alt=""> </div> <!-- .nav-logo --> <div class="nav-links"> <button class="toggle-nav"> <span class="dashes" aria-hidden="true"> <span class="dash"></span> <span class="dash"></span> <span class="dash"></span> </span> <span class="txt">Menu</span> </button> <!-- .toggle-nav --> <div class="nav-links-box"> <ul class="nav-list"> <li><a href="/">Home</a></li> <li><a href="/">Home</a></li> <li><a href="/">Home</a></li> <li><a href="/">Home</a></li> <li><a href="/">Home</a></li> <li><a href="/">Home</a></li> </ul> </div> </div> <!-- .nav-links --> </div> <!-- .container --> </nav> <!-- .site-nav -->放在button标记内。

h2

答案 1 :(得分:2)

这是左侧和右侧按钮的代码。正是您想要的,并在问题中有所描述。最好的做法是使用CSS进行样式设计。

HTML

<variable name="springBoot15AppArg1" value="--server.contextPath=/provider"/>
<variable name="springBoot20AppArg1" value="--server.servlet.contextPath=/provider"/>

<springBootApplication location="provider-exec.war">
    <applicationArgument>${springBoot20AppArg1}</applicationArgument>
</springBootApplication>

CSS

<div class="button">
<button type="button">Hello</button>
<h2 class="h2">Data Search</h2>
<button type="button">Bye</button>
</div>

  <p>This tool does this and that</p>
  <p>To begin your search, do this.
  </p>
  <div class="row">
  <div class="col-sm-12">
  <h1>Data Search</h1><a name="ds"></a>
  </div>

答案 2 :(得分:1)

赋予容器所有元素位置的位置:相对;

然后将按钮添加到该容器中所需的任何位置。 只需给按钮添加以下CSS。

button {
    position: absolute;
    top: 0;
    right: 0;
}

正确设置正确的尺寸,使其直接位于Header标签元素旁边。

答案 3 :(得分:0)

  

标记用于定义HTML标题。 - “这是   不是粗体”

<h1>Data Search <a href="#">Some text</a></h1>

对于bold,您可以使用<b><strong>标签