並排圖像沒有間隙？

Question

這是我需要幫助的任何想法嗎？

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 -->

對不起，抱歉，我在添加代碼時不熟悉，所以我不知道如何識別它。

Answer 1

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

Answer 2

我在這里使用來自Google圖像搜索的圖像做了一個jsfiddle，因為我無權訪問您的圖像，但是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>

當前，您有一個按鈕嵌套在另一個按鈕內部。

Answer 3

查看您的代碼，我可以發現一些可以改進的地方。

首先，您使用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/

並排圖像沒有間隙？

問題描述

3 個解決方案

解決方案1
1 2012-12-31 22:13:58

解決方案2
0 2012-12-31 22:40:09

解決方案3
0 2012-12-31 22:48:22

並排圖像沒有間隙？

問題描述

3 個解決方案

解決方案1 1 2012-12-31 22:13:58

解決方案2 0 2012-12-31 22:40:09

解決方案3 0 2012-12-31 22:48:22

解決方案1
1 2012-12-31 22:13:58

解決方案2
0 2012-12-31 22:40:09

解決方案3
0 2012-12-31 22:48:22