- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
请找到 jsfiddle 的链接
HTML:
<div>
<ul>
<li id="bullet">
<span>Alerts</span>
</li>
</ul>
</div>
CSS:
#bullet{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 20px;
list-style-image: url('https://www.imageupload.co.uk/images/2015/09/29/Alerts_icon.png');
}
我试图垂直居中对齐我的列表文本。我使用 list-style-image 为我的列表添加了一个图标,而不是标准的元素符号。
Edit1: 按照 Eden 的建议,我替换了我的代码,它几乎可以正常工作。但是,列表文本对于某些人来说太长了,当文本移动到下一行时,它是从图像/图标下方开始的。有没有一种方法可以使我的文本准确地从上一行中文本开始的位置开始?
Edit2:这是我的整个 HTML 页面:
<html>
<head>
<title>PLM</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript" src="listSlider.js"></script>
<script type="text/javascript" src="unslider.min.js"></script>
<SCRIPT type=text/javascript>
$(document).ready(function() {
//alert("called");
//alert($().SPServices.SPGetCurrentSite());
var list = "Announcements";
var fieldsToRead = "<ViewFields><FieldRef Name='Title' /></ViewFields>";
var query="<Query></Query>";
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Announcements",
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
completefunc: function(xData, Status)
{
$(xData.responseXML).find("z\\:row, row").each(function ()
{
//alert(xData.responseXML);
var _Title = $(this).attr("ows_Title");
//alert(_Title);
var _Dream_x0020_Destination = $(this).attr("ows_Dream_x0020_Destination");
var _PPP = $(this).attr("ows_PPP");
$("#Announcement").append("<li id='slide'>"+ _Title +"</li>");
});
}
});
});
</script>
<link rel="stylesheet" type="text/css" href="designmypage.css">
<link rel="stylesheet" type="text/css" href="foundation.css">
</head>
<body>
<div class="container">
<div class="main">
<div id="content">
<article>
<h1 id="headalign">Product Lifecycle Management</h1>
<p class="text">What is PLM?</p>
<p class="text">Product Lifecycle Management (PLM) helps manufacturers manage complex, cross-functional processes, coordinating the efforts of distributed teams to consistently and efficiently develop the best possible products.</p></article>
<div id="water"><img src="Landing page/Watermark.png" /></div>
<div id="chart"><img src="Landing page/Chart.png" /></div>
</div>
<div id="contact">
<div id="rect">
<p> Contacts:</p>
</div>
<div id="cr">
<ul class="large-block-grid-8">
<li><img src="Landing page/Contacts/CassWade.png"></li>
<li><p id="Contact_Name_Align">Cass Wade<br/>Project Manager</p></li>
<li><img src="Landing page/Contacts/Meredith.png"></li>
<li id="align"><p id="Contact_Name_Align">Meredith<br/>HR Head</p></li>
<li><img src="Landing page/Contacts/Simon.png"></li>
<li id="align"><p id="Contact_Name_Align">Simon<br/>CEO</p></li>
<li><img src="Landing page/Contacts/Roger.png"></li>
<li id="align"><p id="Contact_Name_Align">Roger<br/>Director</p></li>
</ul>
<hr/>
</div>
</div>
</div>
<div class="sidebar">
<div id="AT">
<ul class="Alert_Icon">
<li><img src="Landing page/Alerts_icon.png"></li>
<li id="lefty">Alerts</li>
</ul>
<div id="Announcement">
<ul id="slider"></ul></div>
<br/><hr/>
<div id="OPL">
<ul class="Alert_Icon">
<li><img src="Landing page/Trainings-OPL_icon.png"></li>
<li id="lefty">Training & OPLs</li>
</ul>
</div>
</div>
<div id="Links">
<p style="margin: 0px; font-size: 22pt; padding: 25px 0px 35px 25px; color: #1c3563">Quick Links</p>
<ul class="bull">
<li id="bullet"><a href="http://sharepoint.stackexchange.com/users/45641/yash-saraiya">Stackexchange</a></li><hr id="bullety"/>
<li id="bullet"><a href="https://msdn.microsoft.com/en-in/">MSDN</a></li><hr id="bullety"/>
<li id="bullet"><a href="https://www.google.co.in/?gfe_rd=cr&ei=XikKVrDpMaLv8wfLnYH4BQ">Google</a></li><hr id="bullety"/>
</ul>
</div>
</div>
</div>
</body>
</html>
此处主标签的宽度为 66%,而侧边栏的宽度为 33%。目前我们实际上正在研究 div id="AT",它占总宽度的 25% 左右。在页面的部分快照下方找到
在页面的 CSS 下方找到:
.container {
background-color: #bad3df;
width: 100%;
height:100%;
position:relative;
font-family: "Arial";
}
#content {
font-size: 14pt;
left: 0%;
position: relative;
height: 75%;
width: 100%;
}
.sidebar {
position: absolute;
display: inline-block;
overflow: hidden;
width: 28%;
height: 99%;
float: right;
}
#water {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}
.main {
display: inline-block;
overflow: hidden;
padding: 2px;
width: 70%;
height:99%;
}
#chart{
position: relative;
margin-left: 14%;
}
#rect{
position: relative;
height: 35px;
border: px solid transparent;
background-color: #5ca3ca;
margin-left: 85px;
font-size: 22pt;
color: #FFFFFF;
}
article {
text-align: justify;
margin-left: 85px;
}
p.text{
padding-top: 40px;
word-wrap: break-word;
}
#contact{
position: relative;
margin-top: 60px;
}
.contact-img {
padding: 40px 0px 15px 0px;
margin: 0;
position: relative;
list-style: none;
border: none;
display: flex;
padding-left: 0px;
}
.Alert_Icon {
position: relative;
list-style: none;
border: none;
margin: 0px 0px 0px 25px;
display: flex;
padding: 20px 10px 25px 0px;
color: #357ebc;
}
ul {
margin-left: 1.1rem;
}
.QL_Icon {
position: relative;
list-style: none;
border: none;
margin-bottom: 0px;
display: flex;
padding-left: 0px;
}
.contact-img li {
display: table-cell;
padding: 0px 0px 0px 0px;
vertical-align: middle;
/* margin-left: 25px; */
width: 69px;
height: 72px;
flex: 1;
}
.Alert_Icon li {
display: table-cell;
padding: 20px 10px 25px 0px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
}
.QL_Icon li {
display: table-cell;
padding: 0px 20px 12px 25px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
}
.contact-img td{
border: 1px solid red;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #82adcc;
margin: 0em 0;
padding: 0;
}
#cr {
padding-top: 40px;
margin-left: 85px;
}
#AT{
margin-left: 50px;
margin-right: 40px;
height: 60%;
margin-bottom: 20px;
background-color: #FFFFFF;
}
#Links{
margin-left: 50px;
margin-right: 40px;
height: 36%;
background-color: #d8e6ed;
}
#align{
vertical-align: middle;
}
#Announcement {
position: relative;
height: 100px;
width: 190px;
/* height: 30%; */
overflow: auto;
font-size: 14pt;
text-decoration: underline;
margin-left: 25px;
margin-right: 40px;
list-style-type: none;
}
#lefty{
position: relative;
top: 10px;
display: table-cell;
padding: 20px 10px 25px 0px;
font-size: 20pt;
vertical-align: middle;
margin-bottom: 0px;
padding-left: 0px;
}
#bullet {
padding: 0px 0px 12px 0px;
margin-left: 25px;
list-style-image: url('Landing page/Bullet.png');
/* position: relative; */
left: 25px;
right: 40px;
}
.bull{
/* padding-left: 25px; */
margin-left: 25px;
margin-right: 40px;
}
#bullety {
margin: 0px;
padding: 0px 0px 12px 0px;
/* padding-bottom: 12px; */
border: solid #bac6cc;
border-width: 1px 0 0;
clear: both;
height: 0;
/* margin: 1.25rem 0 1.1875rem; */
}
#slider{
list-style-type: none;
padding: 2px;
margin: 0px;
}
p#Contact_Name_Align {
display: table-cell !important;
vertical-align: middle !important;
height: 72px !important;
}
#slide{
padding: 4px;
overflow: hidden;
}
#headalign{
position: relative;
top: 40px;
margin: 0px 0px 40px 0px;
padding: 0px;
}
a {
color: #357ebc !important;
line-height: inherit;
text-decoration: none;
}
#AlertImg{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type:none;
line-height:50px;
}
#AlertImg:before{
content:'';
display:inline-block;
width:50px;
height:50px;
background:url('Landing page/Alerts_icon.png');
float:left;
margin-right:10px;
}
#TOPL{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type:none;
line-height:50px;
}
#TOPL:before{
content:'';
display:inline-block;
width:50px;
height:50px;
background:url('https://www.imageupload.co.uk/images/2015/09/29/Trainings-OPL_icon.png');
float:left;
margin-right:10px;
}
注意:您可能会发现很多多余的 CSS,因为这是我第一次从头开始创建页面。
提前致谢!!!
最佳答案
您可以使用 CSS 伪类 :before
将您自己的图像添加到列表中:
#bullet:before{
content:'';
display:inline-block;
width:50px;
height:50px;
background:url('https://www.imageupload.co.uk/images/2015/09/29/Alerts_icon.png');
float:left;
margin-right:5px;
}
因此您可以使用 line-height:50px;
来垂直放置您的文本:
#bullet{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type:none;
line-height:50px;
}
编辑:
就像现在一样,它似乎不必是动态的,因此您可以为长文本添加一个特殊的类(特别是在您应该在“&”之前添加一个
的情况下更好的渲染):
.bullet{
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type:none;
line-height:50px;
width:150px;
margin:15px 0;
}
.twoLine{
line-height:25px;
}
.bullet:before{
content:'';
display:inline-block;
width:50px;
height:50px;
background:url('https://www.imageupload.co.uk/images/2015/09/29/Alerts_icon.png');
float:left;
margin-right:5px;
}
注意:根据我的说法,如果它必须是响应式的,则不能使用 line-height
来完成。可能是 line-height
和 Javascript
关于CSS 列表 : Centering your list text w. r.t 列表样式图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32838439/
我正在尝试学习 Knockout 并尝试创建一个照片 uploader 。我已成功将一些图像存储在数组中。现在我想回帖。在我的 knockout 码(Javascript)中,我这样做: 我在 Jav
我正在使用 php 编写脚本。我的典型问题是如何在 mysql 中添加一个有很多替代文本和图像的问题。想象一下有机化学中具有苯结构的描述。 最有效的方法是什么?据我所知,如果我有一个图像,我可以在数据
我在两个图像之间有一个按钮,我想将按钮居中到图像高度。有人可以帮帮我吗? Entrar
下面的代码示例可以在这里查看 - http://dev.touch-akl.com/celebtrations/ 我一直在尝试做的是在 Canvas 上绘制 2 个图像(发光,然后耀斑。这些图像的链接
请检查此https://jsfiddle.net/rhbwpn19/4/ 图像预览对于第一篇帖子工作正常,但对于其他帖子则不然。 我应该在这里改变什么? function readURL(input)
我对 Canvas 有疑问。我可以用单个图像绘制 Canvas ,但我不能用单独的图像绘制每个 Canvas 。- 如果数据只有一个图像,它工作正常,但数据有多个图像,它不工作你能帮帮我吗? va
我的问题很简单。如何获取 UIImage 的扩展类型?我只能将图像作为 UIImage 而不是它的名称。图像可以是静态的,也可以从手机图库甚至文件路径中获取。如果有人可以为此提供一点帮助,将不胜感激。
我有一个包含 67 个独立路径的 SVG 图像。 是否有任何库/教程可以为每个路径创建单独的光栅图像(例如 PNG),并可能根据路径 ID 命名它们? 最佳答案 谢谢大家。我最终使用了两个答案的组合。
我想将鼠标悬停在一张图片(音乐专辑)上,然后播放一张唱片,所以我希望它向右移动并旋转一点,当它悬停时我希望它恢复正常动画片。它已经可以向右移动,但我无法让它随之旋转。我喜欢让它尽可能简单,因为我不是编
Retina iOS 设备不显示@2X 图像,它显示 1X 图像。 我正在使用 Xcode 4.2.1 Build 4D502,该应用程序的目标是 iOS 5。 我创建了一个测试应用(主/细节)并添加
我正在尝试从头开始以 Angular 实现图像 slider ,并尝试复制 w3school基于图像 slider 。 下面我尝试用 Angular 实现,谁能指导我如何使用 Angular 实现?
我正在尝试获取图像的图像数据,其中 w= 图像宽度,h = 图像高度 for (int i = x; i imageData[pos]>0) //Taking data (here is the pr
我的网页最初通过在 javascript 中动态创建图像填充了大约 1000 个缩略图。由于权限问题,我迁移到 suPHP。现在不用标准 标签本身 我正在通过这个 php 脚本进行检索 $file
我正在尝试将 python opencv 图像转换为 QPixmap。 我按照指示显示Page Link我的代码附在下面 img = cv2.imread('test.png')[:,:,::1]/2
我试图在这个 Repository 中找出语义分割数据集的 NYU-v2 . 我很难理解图像标签是如何存储的。 例如,给定以下图像: 对应的标签图片为: 现在,如果我在 OpenCV 中打开标签图像,
import java.util.Random; class svg{ public static void main(String[] args){ String f="\"
我有一张 8x8 的图片。 (位图 - 可以更改) 我想做的是能够绘制一个形状,给定一个 Path 和 Paint 对象到我的 SurfaceView 上。 目前我所能做的就是用纯色填充形状。我怎样才
要在页面上显示图像,你需要使用源属性(src)。src 指 source 。源属性的值是图像的 URL 地址。 定义图像的语法是: 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此
**MMEditing是基于PyTorch的图像&视频编辑开源工具箱,支持图像和视频超分辨率(super-resolution)、图像修复(inpainting)、图像抠图(matting)、
我正在尝试通过资源文件将图像插入到我的程序中,如下所示: green.png other files 当我尝试使用 QImage 或 QPixm
我是一名优秀的程序员,十分优秀!