Question

我试图在导航栏上方添加一个空格，但我使用的代码未能这样做。

我的CSS

.top-nav ul {
    text-align: right;
    width: 100%;
}
.top-nav  li {
    display:inline;
}
.top-nav a {
    padding-top: 40px;
}
.top-nav  ul a {
    color: #000;
    padding: 0 10px;
    text-decoration: none;
    font-size: 20px;
}
.top-nav  ul a:hover {
    color: #333;
}

小提琴

https://jsfiddle.net/xuk2nk46/

Answer 1

.top-nav {
  padding-top: 40px;
}

Answer 2

你给了top-padding两个值

.top-nav a {
    padding-top: 40px;
}

和

top-nav  ul a {
    color: #000;
    padding: 0 10px;}

应用第二个，即0 px

Answer 3

public class PicassoBitmapDownloader extends UrlConnectionDownloader {

    private static final int MIN_DISK_CACHE_SIZE = 5 * 1024 * 1024; // 5MB
    private static final int MAX_DISK_CACHE_SIZE = 50 * 1024 * 1024; // 50MB

    @NonNull private Context context;
    @Nullable private DiskLruCache diskCache;

    public class IfModifiedResponse extends Response {

        private final String ifModifiedSinceDate;

        public IfModifiedResponse(InputStream stream, boolean loadedFromCache, long contentLength, String ifModifiedSinceDate) {

            super(stream, loadedFromCache, contentLength);
            this.ifModifiedSinceDate = ifModifiedSinceDate;
        }

        public String getIfModifiedSinceDate() {

            return ifModifiedSinceDate;
        }
    }

    public PicassoBitmapDownloader(@NonNull Context context) {

        super(context);
        this.context = context;
    }

    @Override
    public Response load(final Uri uri, int networkPolicy) throws IOException {

        final String key = getKey(uri);
        {
            Response cachedResponse = getCachedBitmap(key);
            if (cachedResponse != null) {
                return cachedResponse;
            }
        }

        IfModifiedResponse response = _load(uri);

        if (cacheBitmap(key, response.getInputStream(), response.getIfModifiedSinceDate())) {

            IfModifiedResponse cachedResponse = getCachedBitmap(key);
            if (cachedResponse != null) {return cachedResponse;
            }
        }

        return response;
    }

    @NonNull
    protected IfModifiedResponse _load(Uri uri) throws IOException {

        HttpURLConnection connection = openConnection(uri);

        int responseCode = connection.getResponseCode();
        if (responseCode >= 300) {
            connection.disconnect();
            throw new ResponseException(responseCode + " " + connection.getResponseMessage(),
                    0, responseCode);
        }

        long contentLength = connection.getHeaderFieldInt("Content-Length", -1);
        String lastModified = connection.getHeaderField(Constants.HEADER_LAST_MODIFIED);
        return new IfModifiedResponse(connection.getInputStream(), false, contentLength, lastModified);
    }

    @Override
    protected HttpURLConnection openConnection(Uri path) throws IOException {

        HttpURLConnection conn = super.openConnection(path);

        DiskLruCache diskCache = getDiskCache();
        DiskLruCache.Snapshot snapshot = diskCache == null ? null : diskCache.get(getKey(path));
        if (snapshot != null) {
            String ifModifiedSince = snapshot.getString(1);
            if (!isEmpty(ifModifiedSince)) {
                conn.addRequestProperty(Constants.HEADER_IF_MODIFIED_SINCE, ifModifiedSince);
            }
        }

        return conn;
    }

    @Override public void shutdown() {

        try {
            if (diskCache != null) {
                diskCache.flush();
                diskCache.close();
            }
        }
        catch (IOException e) {
            e.printStackTrace();
        }

        super.shutdown();
    }

    public boolean cacheBitmap(@Nullable String key, @Nullable InputStream inputStream, @Nullable String ifModifiedSince) {

        if (inputStream == null || isEmpty(key)) {
            return false;
        }

        OutputStream outputStream = null;
        DiskLruCache.Editor edit = null;
        try {
            DiskLruCache diskCache = getDiskCache();
            edit = diskCache == null ? null : diskCache.edit(key);
            outputStream = edit == null ? null : new BufferedOutputStream(edit.newOutputStream(0));

            if (outputStream == null) {
                return false;
            }

            ChatUtils.copy(inputStream, outputStream);
            outputStream.flush();

            edit.set(1, ifModifiedSince == null ? "" : ifModifiedSince);
            edit.commit();

            return true;
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        finally {

            if (edit != null) {
                edit.abortUnlessCommitted();
            }

            ChatUtils.closeQuietly(outputStream);
        }
        return false;
    }

    @Nullable
    public IfModifiedResponse getCachedBitmap(String key) {

        try {
            DiskLruCache diskCache = getDiskCache();
            DiskLruCache.Snapshot snapshot = diskCache == null ? null : diskCache.get(key);
            InputStream inputStream = snapshot == null ? null : snapshot.getInputStream(0);

            if (inputStream == null) {
                return null;
            }

            return new IfModifiedResponse(inputStream, true, snapshot.getLength(0), snapshot.getString(1));
        }
        catch (Exception e) {
            e.printStackTrace();
        }

        return null;
    }

    @Nullable
    synchronized public DiskLruCache getDiskCache() {

        if (diskCache == null) {

            try {
                File file = new File(context.getCacheDir() + "/images");
                if (!file.exists()) {
                    //noinspection ResultOfMethodCallIgnored
                    file.mkdirs();
                }

                long maxSize = calculateDiskCacheSize(file);
                diskCache = DiskLruCache.open(file, BuildConfig.VERSION_CODE, 2, maxSize);
            }
            catch (Exception e) {
                e.printStackTrace();
            }
        }

        return diskCache;
    }

    @NonNull
    private String getKey(@NonNull Uri uri) {

        String key = md5(uri.toString());
        return isEmpty(key) ? String.valueOf(uri.hashCode()) : key;
    }

    @Nullable
    public static String md5(final String toEncrypt) {

        try {
            final MessageDigest digest = MessageDigest.getInstance("md5");
            digest.update(toEncrypt.getBytes());
            final byte[] bytes = digest.digest();
            final StringBuilder sb = new StringBuilder();
            for (byte aByte : bytes) {
                sb.append(String.format("%02X", aByte));
            }
            return sb.toString().toLowerCase();
        }
        catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    static long calculateDiskCacheSize(File dir) {

        long available = ChatUtils.bytesAvailable(dir);
        // Target 2% of the total space.
        long size = available / 50;
        // Bound inside min/max size for disk cache.
        return Math.max(Math.min(size, MAX_DISK_CACHE_SIZE), MIN_DISK_CACHE_SIZE);
    }
}

并删除填充，或只保留一个。

Answer 4

尝试将margin-top添加到.top-nav：

.top-nav {
   margin-top: 20px;
}

Margin在元素外添加一个空格，而padding在元素内添加一个空格。

Answer 5

<a>元素中默认为inline。因此padding top和bottom值不适用。

您必须按inline-block更改默认类型，才能在其上添加top和bottom padding。

此外，您可以将这两个属性.top-nav a和.top-nav ul a组合在一起，如下所示：

.top-nav ul li a {
    display: inline-block;
    color: #000;
    padding: 20px 10px;
    text-decoration: none;
    font-size: 20px;
}

然后，您可以使用此属性设置顶部和底部填充值：padding: 20px 10px;或使用此属性margin: 20px 10px;

Answer 6

只需为.top-nav添加保证金：

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);

*{
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
}

.top-nav {
    margin: 30px 0 0 0; /* ADD MARGIN HERE */
}

.top-nav ul {
    text-align: right;
    width: 100%;
}
.top-nav  li {
    display:inline;
}
.top-nav a {
    padding-top: 40px;
}
.top-nav  ul a {
    color: #000;
    padding: 0 10px;
    text-decoration: none;
    font-size: 20px;
}
.top-nav  ul a:hover {
    color: #333;
}

<nav class="top-nav">
    <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="index.html">Store</a></li>
       <li><a href="index.html">Blog</a></li>
       <li><a href="index.html" id="btn-special">Join Us</a></li>
    </ul>
</nav>

（另见this Fiddle）

无法在导航栏上方添加空间

我的CSS

小提琴

6 个答案: