Question

首先你好！

我一直致力于基础项目，但遇到了问题。我在页面左侧有我想要的菜单栏。然后我想要一个中间的文本块。在右边我想要一个登录选项，广告空间和一些谷歌地图图片。

我将向您展示代码，并取出文本块中的文本。

MSG_CODE foo(void) {
    return MSG_OK; // or something else
}

MSG_CODE ret = foo();

if (MSG_OK != ret) {
    printf("%s\n", gm(ret););
}

<div>
    <img src="banner1.jpg" class="banner">
</div>

<div class="content">
<div class="menuopmaak" id="contentmiddle">
    <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Dell</a></li>
    <li><a href="#">HP</a></li>
    </ul>
</div>


<div class="tekstblok" id="contentmiddle">
    <h1>Wij zijn altijd de goedkoopste</h1>
        <p>orem ipsum dolor.</p>

我的CSS

<div class="Loginblok" id="contentmiddle">
    <fieldset>
        <label for="username">Username</label>
            <input required type="text" id="username" name="username" placeholder="e-mail"/>
        <label for="password">wachtwoord</label>
            <input required type="text" id="wachtwoord" name="wachtwoord" placeholder="wachtwoord"/>
    </fieldset>
</div></b>

怎么办？非常感谢帮助！

Answer 1

如果你想把你的菜单放到左边，你应该把你放在菜单上。你应该：

.menuopmaak {
   float:left;
}

而不是

#contentmiddle {
  float:left;
}

然后删除清除即可。

希望它是你想要的;）

Answer 2

我猜这是接近你想要的东西：

.banner {
position: relative;
display: block;
width: 728px;
height: 90px;
margin: 12px auto;
border: 1px solid rgba(63,63,63,1);
}

.content {
position: relative;
display: block;
margin: 0 auto;
width: 1072px;
}

.content div {
  float:left;
  display: inline-block;
  margin: 12px;
}

ul li  {
  margin-bottom: 1px;
  border: 1px solid black;
}

.menuopmaak {
  color: #CCC;
  width: 200px;
}

.tekstblok {
  background-color: #ccc;
  width: 600px;
  height: 600px;
  overflow: scroll;
}

.Loginblok {
width: 200px;
}

<div>
<img class="banner" src="banner1.jpg" >
</div>

<div class="content">
<div class="menuopmaak">
    <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Dell</a></li>
    <li><a href="#">HP</a></li>
    </ul>
</div>


<div class="tekstblok">
    <h1>Wij zijn altijd de goedkoopste</h1>
        <p>orem ipsum dolor.</p>
</div>

<div class="Loginblok">
    <fieldset>
        <label for="username">Username</label>
            <input required type="text" id="username" name="username" placeholder="e-mail"/>
        <label for="password">wachtwoord</label>
            <input required type="text" id="wachtwoord" name="wachtwoord" placeholder="wachtwoord"/>
    </fieldset>
</div>

请与上面的标记进行比较和对比，并在下面的评论中提出问题，这样您就可以澄清我对您的标记所做的更改以及为什么元素在上面的修改示例中的显示方式不同。

Answer 3

这应该做。我修改了css和html。这是html：

<div>
    <img src="banner1.jpg" class="banner">
</div>

<div class="content">
<div class="menuopmaak" >
    <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Dell</a></li>
    <li><a href="#">HP</a></li>
    </ul>
</div>


<div class="tekstblok" >
		<h1>Wij zijn altijd de goedkoopste</h1>
        <p>orem ipsum dolor.</p>
</div>
<div class="Loginblok" >
    <fieldset>
        <label for="username">Username</label>
            <input required type="text" id="username" name="username" placeholder="e-mail"/><br>
        <label for="password">wachtwoord</label>
            <input required type="text" id="wachtwoord" name="wachtwoord" placeholder="wachtwoord"/>
    </fieldset>
</div>
</div>

而css ......

ul li  {
  margin-bottom: 1px;
  border: 1px solid black;
}

.content {
  overflow: hidden;
	
  }

.menuopmaak {
  width: 100%;
  color: #CCC;
	display:inline-block;
	width:30%;
	float:left;	
}

.tekstblok {
  background-color: #ccc;  
  height: 600px;
  overflow: scroll;
  display:inline-block;
  clear:both;
  width:30%;	
}
.Loginblok{
	width:30%;
	position:absolute;
	right:0px;
	top:50px;
	}
#contentmiddle {
  float:left;
}

UL反叛。不能彼此相邻的元素

3 个答案: