http://jsfiddle.net/8uFpD/
我希望链接“主页”“我们做什么”“我们是谁”和“捐赠”以在它们之间留出更多的水平空间.我无法弄明白该怎么做,我尝试了很多方法(span,div等)
如何在不必使用白色方形图像的情况下添加它们之间的水平空间？ (这对我来说似乎很俗气.)
HTML：
<body><div > <div > <span >My Website</span> <span > <a href="index.HTML"> Home</a> <span /> <a href="ourwork.HTML"> What We Do</a> <span /> <a href="about.HTML"> Who We Are</a> <span /> <a href="donate.HTML"> Donate</a> </span> </div> <div ></div> <div >HOME</div> <div ></div> <div > BLAH BLAH BLAH </div></div></body>
CSS：
body {Font-family:Arial,Helvetica,sans-serif;margin:0px;background-image:url('images/bg.jpg');background-repeat:no-repeat;background-size: 100% 100%;}div.wrapper {wIDth:862px;margin-left:auto;margin-right:auto;border:2px solID black;margin-top:20px;margin-bottom:20px;}div.home {background-image:url('images/bg_home.jpg');background-repeat:no-repeat;height:492px;}div.homeText {position:relative;left:390px;top:400px;Font-size:xx-large;color:#ffffff;text-shadow: 2px 2px 3px black;}span.Title {color:#000000;float:left;Font-size:x-large;}span.navigation {color: #000000;float:right;}span.hoMetagline {Font-size: x-large;position:relative;left:65px;text-shadow: 2px 2px 3px black;}/* unvisited link */a.navigation:link {color:#000000; text-decoration:none;}/* unvisited link */a.navigation:visited {color:#000000; text-decoration:none;}/* mouse over link */a.navigation:hover {color:#FF0000; text-decoration:none;} /* mouse over link */a.navigation:active {color:#FF0000; text-decoration:none;} h1.white {color:#ffffff;}div.whiteTitlebar {background-color:#ffffff;height:50px;padding:10px;text-shadow: 1px 1px 5px #909090;}div.redYouAreHerebar {background-color:#ff0000;height:50px;padding:10px;Font-size:xx-large;color: #ffffff;text-shadow: 2px 2px 5px black;}div.white {background-color:#ffffff;}div.red {background-color:#ff0000;}div.teal {background-color: #008080;}div.lightGray {background-color: #D1D0CE;}div.graytransparent {background-color: #837E7C;opacity:0.2;filter:Alpha(opacity=20); /* For ie8 and earlIEr */}div.darkGray {background-color: #404040;}div.whitetransparent {background-color: #ffffff;opacity:0.7;filter:Alpha(opacity=70); /* For ie8 and earlIEr */}div.blackborder {border:2px solID black;}div.blackHorizontalline {border-bottom:2px solID black;} 解决方案对我有用
我把这个添加到了CSS中
span.navigationSpace { padding-left: 50px;} 我也对此进行了测试,它也有效(作为替代解决方案)：
span.navigationSpace { margin-left: 50px;} 我以为我已经尝试了这些,但也许我只需要删除我的缓存以显示更改并且我不知何故错过了它？
我选择了Roy的答案,因为它让我尝试了这个.我比其他答案更喜欢这个解决方案,因为它将文本样式与布局样式分开,更加模块化. (另一个答案在最右边有一个边缘,我更喜欢没有.)
解决方法a.navigation-link { padding: 0px 10px; word-wrap: normal; display: inline-block;} padding的完整语法是右下角左下角,但是有一些shorthands,你可以在MDN上阅读更多内容.我在上面的例子中使用了上下左右(因此顶部和底部为0px,右侧和左侧为10px)侧).
总结以上是内存溢出为你收集整理的HTML / CSS中链接之间的水平空格全部内容，希望文章能够帮你解决HTML / CSS中链接之间的水平空格所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）