Question

我似乎无法弄清楚如何将此空间移到图像的左侧，以及右侧图像之间的小空间。我尝试过各种各样的东西，但没有任何效果。这是导航的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dog's Life</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
    <img src="images/navimg.png" class="navbarimg">
    <a href="/index.html"><img src="images/banner.jpg" style="width:100%"></a>
</header>
<nav>
    <ul>
    <li><a href="/index.html"><img src="images/home-nav.png" alt="Home"></a></li>
    <li><a href="/about.html"><img src="images/about-nav.png" alt="About"></a></li>
    <li><a href="/services.html"><img src="images/services-nav.png" alt="Services"></a></li>
    <li><a href="/gallery.html"><img src="images/gallery-nav.png" alt="Gallery"></a></li>
    <li><a href="/contact.html"><img src="images/contact-nav.png" alt="Contact"></a></li>
    </ul>
</nav>

CSS：

body { background-color: #abc67e;
      color: #666666;
      font-family:Tahoma; 
      height: 100%;
}     
header { background-color: #ffe4b5;
         color: #FFFFFF;
         font-family: Tahoma; 
         margin-bottom: 0;
         z-index: 2;
}

h1 { line-height: 200%;
     background-image: url(sunset.jpg);
     background-repeat: no-repeat;
     background-position: right;
     padding-left: 20px;
     height: 72px;
     margin-bottom: 0;
}
nav { font-weight: bold;
      background-color: #deb887; 
      z-index: 1;
}
h2 {  font-family: Tahoma; 
}
dt { color: #000033; 
     font-weight: bold;
}            
footer { font-size: 0.70em;
         text-align: center;
         font-style: italic;
         padding: 10px;
}        
h3 { color: #000033; 
}
main { padding-left: 20px;
      padding-right: 20px;
}
#wrapper { margin-left: auto;
           margin-right: auto;
           width: 55%;
           background-color: #fdf5e6;
           min-width: auto;
           box-shadow: 5px 5px 5px #523411;
           height: 100%;
           border: 4px;
           border-style: outset;
}
nav ul { list-style-type: none; 
        margin-top: 0;
        z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right; 
      border-left: 1px;
      border-left-style: dotted;
      padding-left: 50px;}
aside img { width: 100%;
          height: 100%;}
section { float: right;
        width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
     width: 225px;
     padding-bottom: 10px;
     margin: 10px;
     background-color: #EAEAEA;
     text-align: center;
     font-style: italic;
     font-family: Tahoma; }
label { float: left; 
      display: block; 
      width: 8em;
      padding-right: 25px; 
      }
input { display: block;
      margin-bottom: 1em;
      }
textarea { display: block; 
        margin-bottom: 1em;
      }
#mySubmit { margin-left: 11.5em;
      }
.navbarimg { position: absolute; 
             padding-left: 650px;
             padding-top: 110px;
            z-index: -1;}

由于

Answer 1

<ul>元素默认为padding-left，因此您需要将其删除：

nav ul {
    padding-left: 0;
}

然后，每张图片之间的空格是因为您将每个<li>放在一个单独的行上，<li>设置了display: inline，因此浏览器会在它们之间添加一个空格。你可以强制它与float: left：

没有空格

nav li { 
    float: left;
}

现在<ul>包装器需要知道它应该覆盖整个内容，包括浮动元素，以便您可以设置它overflow: auto。

nav ul {
    overflow: auto;
}

请参阅更新的jsfiddle：https://jsfiddle.net/f1s11mxp/

Answer 2

添加到#include <iostream> #include <sstream> void count_words(std::string); int main(){ std::string input_text, output_text; std::cout<< "Enter a text: "; std::getline(std::cin,input_text); count_words(input_text); system ("PAUSE"); return 0; //MUST RETURN AN INTEGER VALUE FROM 'INT MAIN' } void count_words(std::string inputString){ std::string output_text; std::stringstream indexes; int number_of_words=0; //If there are no words, it would be false, make it 0. //int counter []={0}; //This serves no purpose. if(!inputString.empty()){// test to make sure it isn't empty. number_of_words++; for(int i = 0; i < inputString.length();i++){ // For loops should have curly braces {} containing their statement. if(inputString[i] == ' '){ number_of_words++; } if((isalpha(inputString[i]))&&inputString[i-1]==' '){ //test for following space separated word indexes << i << " "; } } } output_text = indexes.str(); //convert stringstream to string std::cout << "Number of words: " << number_of_words << std::endl; //std:: cout << number_of_words << std::endl; //duplicate info std::cout << "Indexes: " << output_text << std::endl; } function main %do stuff function [a,b,c,d]=sub_main imenu=menu(' ','yes','no','quit'); if imenu==3 %RETURN, BREAK OR SOMETHING! end a=1; b=2; c=3; d=4; end end nav ul：

padding-left

我经常不得不求助于摆脱内联或内联块元素之间的空间，以便“注释掉”＃39;因为它是HTML标记中的空格，如下所示：

导航栏填充？

2 个答案: