gpt4 book ai didi

html - 元素获取 'pulled' 进入段落

转载 作者:行者123 更新时间:2023-11-28 03:18:09 26 4
gpt4 key购买 nike

在向我的 HTML 添加一些 CSS 时,我偶然发现了这种奇怪的行为,如屏幕截图所示: Screenshot in Chrome .我想知道是否有人可以向我解释为什么每次我让我的按钮向左浮动(在 CSS 中)时都会发生这种情况。

我的代码:

body {
margin: 0px;
padding: 0px;
}

/* Classes */
.smallButton {
/* Button */
width: 30px;
height: 30px;
border: none;
border-radius: 15px;
outline: none;
}

.largeButton {
/* Button */
width: 60px;
height: 60px;
border: none;
border-radius: 30px;
outline: none;
}

/* Individuals */
#toolList {
float: left;
vertical-align: top;
}

#bmenuButton {
float: left;
}

#textField {
width: 500px;
height: 500px;
}
<!DOCTYPE html>
<html>

<head>
<title>Stackoverflow</title>
<!-- Stylesheets -->
<link type="text/css", href="css/styles.css", rel="stylesheet">
</head>

<body>
<div id="toolList">

<!-- Sidebar button -->
<button id="bmenuButton" class="largeButton">BurgerMenu Button</button>

<!-- Toolbar A -->
<div id="toolBarA">
<!--1st line -->
<div id="toolLineA">
<!-- Fonts -->
<select>
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
</select>
</div>
<!--2nd line -->
<div id="toolLineB">
<!-- Formatting -->
<button class="smallButton">Bold</button>
<button class="smallButton">Italic</button>
<button class="smallButton">Underline</button>
<button class="smallButton">Crossthrough</button>
<!-- Alignments -->
<button class="smallButton">Left</button>
<button class="smallButton">Center</button>
<button class="smallButton">Right</button>
<!-- Utility -->
<button class="smallButton" disabled>Undo</button>
<button class="smallButton" disabled>Redo</button>
<!-- Document -->
<button class="smallButton">Print</button>
</div>
</div>

</div>

<!-- Text field -->
<p id="textField", contenteditable="true">Contenteditable paragraph text</p>
</body>

</html>

有人可以向我解释为什么会发生这种情况吗,因为我是网络开发的新手?

最佳答案

知道了 RE: '其他 html 元素被“拉”到段落中。不过,我希望他们在外面。”

您的段落只是与您的 float 元素内嵌。您需要清除 float 以使该段落位于下方。为此,请将您的段落包装在一个 div(名为“clearfloat”的类)中,然后将值为“both”的 css“clear”属性添加到 div。

HTML:

<div class="clearfloat">
<p id="textField", contenteditable="true">Contenteditable paragraph text</p>
</div>

CSS:

.clearfloat { 
clear:both;
}

关于html - 元素获取 'pulled' 进入段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45354573/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com