为什么<span>标签彼此重叠,以及如何防止这种情况?我需要它们很好地环绕屏幕,这样它们就不会妨碍其他人的观点.
HTML:
<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
etc...
Run Code Online (Sandbox Code Playgroud)
CSS:
.alphas {
border-radius: 5px;
border: 12px solid #8AC007;
padding: 20px;
background-color: #006677;
width: 200px;
height: 150px;
}
Run Code Online (Sandbox Code Playgroud)
我一直在尝试段落并从脚本标签写入它们,并且想知道是否有一种方法可以将它们水平放置在彼此旁边而不是在下面。我当前的代码是这样的:
<p id="csvData"></p>
<p id="csvData2"></p>
Run Code Online (Sandbox Code Playgroud)
我不知道如何让“csvData”和“csvData2”彼此相邻。
我试图在我的网站上使用三角形(纯css)进行upvoting和downvoting.我已经创建了三角形但是无法将它们与喜欢和不喜欢的文本对齐.

我希望它们与最小代码的文本对齐.
的CSS
.vote{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
cursor: pointer;
vertical-align: middle;
}
.upvote{
border-bottom: 10px solid #7d7d7d;
}
.downvote{
border-top: 10px solid #7d7d7d;
}
.upvoted{
border-bottom: 10px solid teal;
}
.downvoted{
border-top: 10px solid #ab102f;
}
Run Code Online (Sandbox Code Playgroud)
html的
<span id='votings'><span class='vote upvoted'></span>
<?php echo $current['likes'];?>
<span class='vote downvote'></span>
<?php echo $current['dislikes'];?>
<?php echo $current['action'];?>
</span>
Run Code Online (Sandbox Code Playgroud)
用最少的添加代码帮助我做到这一点.任何帮助,建议,建议表示赞赏.谢谢!
我也尝试了负利润率.但没有帮助.
我正在尝试使用 HTML5 来模仿APA6 编写标准。我想让标题标签 ( <h>) 3-6 不转到下一行,并且不确定是否/如何通过更改 css 样式来做到这一点。
<html>
<head>
<title>Title</title>
<style>
h3 {font-size: 16px; font-weight:bold;}
</style>
</head>
<body>
<h2>What it looks like...</h2><hr>
<h3>Level 3 Header.</h3>
<p>Content here. Lots of random text to make an academic sound smart.. I've done my best to maintain APA6 standards in this document but within HTML5 some rules do not make sense. For instance, there are no page breaks.</p>
<br><br><br><br>
<h2>What I'd like it to look like...</h2><hr> …Run Code Online (Sandbox Code Playgroud) 这是我的HTML:
<div class="scrollingBox">
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
</div
Run Code Online (Sandbox Code Playgroud)
这是我的CSS:
.scrollingBox {
height:100px;
width:300px;
overflow:auto;
}
.item {
float:left;
height:60px;
margin:5px;
width:100px;
}
Run Code Online (Sandbox Code Playgroud)
该.container可以包含任意数量的.item秒.
我现在的问题是.container永远不会比它更宽.scrollingBox,滚动框最终会有一个垂直滚动条,而.items最终会垂直堆叠.我给出.container一个固定的高度,但是.items堆栈垂直超出这个固定的高度.
我想要.container没有固定的宽度,所以它可以采取任何数量的项目.我希望滚动条是水平的,我也希望.items水平堆叠.
我的问题:
我应用什么CSS .container来.item水平堆栈?
我希望HTML中的标签最大宽度为100px,如果此标签的文本长度超过100px则会被切断.一个完美的结果将是一个削减,最后一些点"..".
我有:
<label> This is some long text on my website </label>
Run Code Online (Sandbox Code Playgroud)
期望的结果将是这样的:
这是一些...
单独使用CSS是否可行?首先,如果它只在最后被削减,那就没关系.先感谢您!
我试图在CSS中将宽度设置为100px,但这只会改变标签的背景颜色而不是文本的大小.