Question

我正在尝试编写一个带有标题和下方链接的div框，但不知怎的，我无法将链接显示在彼此旁边，我尝试使用display：inline，但它没有效果，我也试过浮动，位置等，但是不能搞清楚我想要的东西而不搞乱。

<div style="background:#E1ED9D; width: 25%;height:250px;  position: relative; float: left;">    
    <h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
     <a href="">
        <h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
    </a>
    <a href="">
       <h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
   </a> 
    <a href="">
       <h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
   </a> 
    <a href="">
       <h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
   </a> 
</div>

很抱歉重复代码，这是因为我不能使用CSS或将代码放入head部分，因为我的任务要求只有html的body部分，如果有人能在没有对我的代码进行过多更改的情况下向我显示答案，我将非常感激

Answer 1

我摆脱了h4标签并改为使用div

http://jsfiddle.net/dfc8gceg/8/

<div style="background:#E1ED9D; width: 50%;height:150px;  position: relative; float: left;">    
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
 <a href="">
     <div id="div1">hej</div>
</a>
<a href="">
   <div id="div2">hej</div>
</a> 
<a href="">
   <div id="div3">hej</div>
</a> 
<a href="">
   <div id="div4">hej</div>
</a> 
</div>

我还在jsfiddle中添加了一些css

你应该更多地了解如何使用css和html

希望这对你有用！

Answer 2

我做了一个JSFiddle，这是你的目标吗？

http://jsfiddle.net/dfc8gceg/7/
这是HTML

<div id="container">  
    <h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
    <a href="" id="link1" class="link"><h4>Link1</h4></a>
    <a href="" id="link3" class="link"><h4>Link3</h4></a>
    <a href="" id="link2" class="link"><h4>Link2</h4></a> 
    <a href="" id="link4" class="link"><h4>Link4</h4></a>
</div>

随附CSS

#container {
    background: #E1ED9D;
    width: 25%;
    height: 250px;
    position: relative;
    float: left;
}
h3 {
    text-align: center;
    margin:0;
}
a {
    display: inline-block;
}
.link {
    width: 50%;
    color: #0e8dbc;
    text-align: center;
    display: inline-block;
    float: left;
}
#link1 {
    background: blue;
    margin: 10% 0 0 0;
}
#link2 {
    background: orange;
    margin: 3% 0 0 0;
}
#link3 {
    background: purple;
    margin: 10% 0 0 0;
}
#link4 {
    background: red;
    margin: 3% 0 0 0;
}

我认为我实现了你想要的目标希望这可以帮助！：d

PS：我是Stack Overflow的菜鸟，我是否正确格式化了？它想要答案中的代码......

编辑：我为你保留了H4元素，但随时可以更改它们（我不想改变你的任何代码，我保持这一切只是让它更整洁）

Answer 3

首选方法是使用无序列表（<ul><li></li></ul>），然后将css添加到列表display: inline;以删除默认块级别显示。或者，您可以使用display: block; float: left;，以便为li提供宽度。

此外，您不应该使用内联CSS，而应使用样式表。

像这样：

<强> CSS：

.container {
  background: #E1ED9D;
  width: 25%;
  height: 250px;
  position: relative;
  float: left;
}
.container h3 {
  text-align:center;
  margin:0;
  font-size: 14px;
  font-family: arial;
  font-weight: normal;
}
.list {
    width: 100%;
    padding: 15px 0 0 0;
    margin: 0;
}
.list li {
    style-type: none;
    display: block;
    float: left;
    width: 50%;
    margin: 15px 0 0 0;
    padding: 10px 0;
    text-align:center;
}
.list li a {
  color:#0e8dbc;
}
#first-link {
  background:blue;
}
#second-link {
  background:orange;
}
#third-link {
  background:purple;
}
#fourth-link {
  background:red;
}

<强> HTML

<div class="container">
  <h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
    <ul class="list">   
        <li id="first-link"><a href="#">Link1</a></li>
        <li id="second-link"><a href="#">Link2</a></li>
    </ul>
    <ul class="list"> 
        <li id="third-link"><a href="#">Link3</a></li>
        <li id="fourth-link"><a href="#">Link4</a></li>
    </ul>
</div>

另外，如上所述，你不需要H4，因为这是一个很差的编码放入菜单（你拥有的本质上是一个菜单）。 H4最好用作标头标签。相反，通过为LI元素定义css类，不需要像h4这样的特定html标记。

编辑：我改进了之前的CSS代码。我将ID元素更改为类（如果将有更多元素使用相同的类，则使用类），并将链接类移动到LI中。我还将li类更改为ID，因为ID只在页面上出现一次时才会被使用。鉴于ID的特殊性，这些可能不会再次使用。如果是，你应该把它改回班级。

jsfiddle：http://jsfiddle.net/Lxyjjfx2/1/

我无法将我的链接显示为HTML中的内联

3 个答案: