没有间隙的并排图像？

This is what i need help with, any ideas?

http://i.stack.imgur.com/o2Kht.png

基本上我想这些按钮以并排。

我已经把它们放在一个容器中，但是我不能像下面的例子那样把它们并排放置。

<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- Linking Style Sheets --> 
</head> 

<body> 

<style type="text/css"> 


<!-- Background image --> 


</style> 

<div class="img-wrapper-center" id="titlebar"> 
    <img src="titlebar.png" id="img1"/>  
</div> 
</div> 

<div id="bodycontainer"> 
<div id="text"> 
Welcome to the shop, you can add your items to to the cart below 
</div> 

<div id="formcontainer"> 
<div id="myForm"> 
    <form name="theForm" action="shop.html" method="post" onSubmit="return checkWholeForm(theForm)"> 
     <input type="radio" name="ram" value="yes">yes<br> 
     <input type="radio" name="ram" value="no">no 

     <br><br> 
     <input type="radio" name="cpu" value="yes">yes<br> 
     <input type="radio" name="cpu" value="no">no 

     <br><br> 
     <input type="radio" name="harddrive" value="yes">yes<br> 
     <input type="radio" name="harddrive" value="no">no 

     <br><br> 

</div> 

<div id="submitbuttons"> 
     <input type="submit" value="Submit"> 
     <input type="reset"> 
</div> 
</div> 

</form> 


<div id="buttoncontainer"> 

<div class="homebtn"> 
    <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/> 
    </a> 
    <div class="shopbtn"> 
    <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/> 
    </a> 
    </div> 
</div> 

</body> 





<!-- Start of rollover script --> 

<script> 
Rollimage = new Array() 

Rollimage[0]= new Image(121,153) 
Rollimage[0].src = "homebuttonup.png" 

Rollimage[1] = new Image(121,153) 
Rollimage[1].src = "homebutton.png" 

function SwapOut() { 
document.homebtn.src = Rollimage[1].src; 
return true; 
} 

function SwapBack() { 
document.homebtn.src = Rollimage[0].src; 
return true; 
} 


Rollimageshop = new Array() 

Rollimageshop[0]= new Image(121,153) 
Rollimageshop[0].src = "shopbuttonup.png" 

Rollimageshop[1] = new Image(121,153) 
Rollimageshop[1].src = "shopbutton.png" 

function SwapOutshop() { 
document.shopbtn.src = Rollimageshop[1].src; 
return true; 
} 

function SwapBackshop() { 
document.shopbtn.src = Rollimageshop[0].src; 
return true; 
} 


</script> 
<!-- end of rollover script --> 

<!-- Start of form validation --> 

<script> 

function checkWholeForm(theForm) { 
    var reason = ''; 
    reason += checkRadioButtons(theForm.ram); 

    if (reason != '') { 
     alert(reason); 
     return false; 
    } 
    return true; 
} 


function checkRadioButtons(radiobuttons) { 
    var checkvalue = ""; 
    var i=0; 
    var error = ""; 
    var amountOfRadioButtons = radiobuttons.length; 
    for (i=0; i<amountOfRadioButtons; i++) { 
     if (radiobuttons[i].checked) { 
      checkvalue = theForm.ram[i].value; 
     } 
    } 
    if (!(checkvalue)) { 
     error = "Please choose an option for RAM.\n" 
    } 
    return error; 
} 





</script> 

<!-- End of form validation -->

对不起，rofl即时通讯新增加的代码，所以我不知道如何识别它。

来源

2012-12-31 Ryan Conway

很高兴您提供的问题，你想要什么的截图，但在未来，请在邮件的问题，所以我们可以复制/粘贴与它的工作相关的代码。 http://jsbin.com/和http://jsfiddle.net/也很适合创建示例。 – sachleen

为什么shopbtn在homebtn – sachleen

.homebtn, .shopbtn{ 
    display:inline; /*or inline-block*/ 
}

来源

2012-12-31 22:13:58 mbinette

内工作正常，但是在这种方式下是一个下划线的东西？ http://i.imgur.com/87r3j.jpg –

@RyanConway使图像浮动在其容器内。 – sachleen

你确定这不只是一个空间吗？尝试在'.homebtn，.shopbtn'块中添加'float：left;'并且如果下划线消失，那就是一个空格。 – mbinette

我做了一个使用图像jsfiddle here从谷歌图片搜索，因为我没有访问到您的图片，但CSS应该是你自己的用途颇为相似。

你也应该解决您的HTML按钮容器

<div id="buttoncontainer"> 
    <div class="homebtn"> 
    <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"> 
     <img name="homebtn" src="homebuttonup.png"/> 
    </a> 
    </div> 
    <div class="shopbtn"> 
    <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"> 
     <img name="shopbtn" src="shopbuttonup.png"/> 
    </a> 
    </div> 
</div>

您目前有嵌套在另一个里面一个按钮。

来源

2012-12-31 22:40:09 Zack

看着你的代码，我可以发现一些可以改进的地方。

首先，您正在使用JavaScript来处理按钮翻转。除非有特定的理由要这样做，否则没有必要。更有效的方法是使用纯CSS作为按钮翻转。

其次，你必须嵌入链接本身的图像：

<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/> 
</a>

如果你实际使用基于CSS的导航，你不会需要做到这一点。好处是代码少，最终页面大小和加载时间。请记住，每个图像加载都是一个单独的HTTP请求到服务器。这从长远来看等于更多的带宽。您的网站可能不受这种类型的东西影响，但这是一个很好的做法;最佳实践。

我已经创建了一个JSFiddle向您展示如何处理您的导航。我会补充的另一件事是将所有的导航图像放入Sprite中。

http://jsfiddle.net/cbPRv/

来源

2012-12-31 22:48:22

没有间隙的并排图像？

回答

相关问题