我能'；我的链接无法在HTML中显示为内联

我试图写一个div框，下面有标题和链接，但不知何故，我无法让链接彼此相邻显示，我尝试过使用display:inline，但没有效果，我也尝试过float、position等，但就是无法得到我想要的东西而不搞砸

我的代码在这里：

我希望下面的链接显示为第一行link1和line2，然后是下一行link3和link4，各宽50%

很抱歉重复代码，这是因为我不能使用CSS或将代码放入html的头部分，只有正文部分，因为我的任务要求，

---

如果有人能在代码上不做太多更改的情况下告诉我答案，我将不胜感激

我去掉了h4标签，改用了div

我希望下面的链接显示为第一列link1和第二行，然后是下一列link3和link4，各宽50%

我还向JSFIDLE添加了一些css

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

---

希望这对你有用

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

这是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>

我想我实现了你想要的。
希望这有帮助！：D

PS：我是堆栈溢出的noob，我的格式正确吗？它想要答案中的密码，所以

---

编辑：我为您保留了H4元素，但可以随意更改它们（我不想更改您的任何代码，我只是让它更整洁）

首选方法是使用无序列表（

），然后将css添加到列表中，
显示：内联以删除默认块级显示。或者，您可以使用
display:block；浮动：左，您需要它来为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>


我希望下面的链接显示为第一行link1和line2，然后是下一行link3和link4，各宽50%









此外，如上所述，您不需要H4s，因为将其放入菜单（您拥有的基本上是菜单）的编码很差。H4最好用作标题标记。通过为LI元素定义css类，不需要像h4这样的特定html标记

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

jsiddle:
一个
h4
元素是默认的
display:block
，您是否也将该样式更改为
inline
？是否需要在
a
元素中使用
h*
元素？这就是我学到的，您的意思是我应该只对链接使用标记？我曾尝试在标签和h标签上使用显示块，但不知何故，链接根本没有移动，从而消除了那些非常不合适的
标签
hx
标签适用于车头。像这样的内联样式也很可怕：/在问这种问题之前，你应该先阅读一些关于html和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;
}

.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;
}

<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>