代码之家  ›  专栏  ›  技术社区  ›  Gavin T

如何在html中内联放置p和a标记?

  •  1
  • Gavin T  · 技术社区  · 7 年前

    <p> 内联标记 <a> 标签,但我不知道怎么做。我在css中尝试了几种显示类型,但它们要么不起作用,要么做了一些奇怪的事情。

    body {
    	margin: 0;
    	padding: 0;
    	background-color: #efefef;
    }
    
    header {
    	margin: 0;
    	margin-top: -10px;
    	background-color: #ffffff;
    }
    
    header p {
    	margin: 0;
    	font-family: "arial";
    	font-size: 50px;
    	color: #3c3c3c;
    	margin-top: 10px;
    	margin-left: 10px;
    	text-align: center;
    }
    
    header a {
    }
    
    #information {
    	width: 500px;
    	height: 250px;
    	background-color: #ffffff;
    	box-shadow: 7px 7px 4px grey;
    	margin-left: 100px;
    	margin-top: 150px;
    }
    
    #information p {
    	font-family: "arial";
    	font-size: 20px;
    	color: #1febff;
    }
    
    #delete {
    	margin-top: 2000px;
    }
    <!DOCTYPE html>
    <html>
    <head>
    	<title>SaHa | Color Scheme</title>
    	<link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
    
    	<header>
    		<p>SaHa</p>
    
    		<a href="#">Menu</a>
    	</header>
    
    	<div id="information">
    		<p>Pretend that there is a bunch of important information here even though there really isn't.
    		   This is normally where a message that actually means something would go, but this is just a
    		   placeholder because I have nothing important to put here right now.
    		</p>
    	</div>
    
    	<div id="delete"></div>
    
    </body>
    </html>
    2 回复  |  直到 7 年前
        1
  •  1
  •   Srajan Chansoriya    7 年前
    1. 在HTML中,尝试直接键入或

      在你想要它出现的任何文本之后。

    例如: <div>When i came<a> ut yiur name</a>so what do i do</div>

    例如:

    一个{display:inline block;}

        2
  •  0
  •   Misacorp    7 年前

    display: inline display: inline-block display: block <p> 元素 by default.

    <header> ,我在您现有的CSS中添加了以下规则。过来看 in action.

    header p {
      display: inline-block;
    }
    

    根据进一步的评论,这里有一个解决方案,你正在寻找。

    首先,我把你的菜单包在一个 nav 元素并使您的主标题成为 h1 要素搜索引擎更喜欢这样。A. 默认情况下,元素也以内联方式显示 text-align 其父容器(在本例中为 header ).

    <h1>SaHa</h1>
    <nav>
      <a href="#">Menu</a>
      <a href="#">Thing</a>
      <a href="#">Stuff</a>
    </nav>
    

    在CSS方面,我做了两个关键的改变。

    ,我已将您的 文本这集中了新的 h1 要素此外,我还设置了 position: relative

    header {
      text-align: center;
      position: relative;
    }
    

    ,为了将菜单定位到屏幕的右侧,我用 position: absolute . 现在,通过指定 top bottom left right ,我们可以将菜单定位在标题中的任何位置。为什么是标题?因为它是距离 导航 这有一个 relative

    nav {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    

    尝试更改的值 底部 this Codepen example . 尝试更改 左边 看看会发生什么。如果删除,会发生什么 从…起 .header ?