网站设计的页脚注释中的间距不均匀
Posted
技术标签:
【中文标题】网站设计的页脚注释中的间距不均匀【英文标题】:Uneven spacing in footer note with design of a website 【发布时间】:2021-12-30 08:57:43 【问题描述】:作为一家初创公司,我们目前正在开发我们的网站。我们有一点编程背景,但主要是生物信息学,所以对 html 和 javascript 比较陌生。所以这就是为什么我们会问这个“愚蠢”的问题。我们目前正在使用 WordPress,我们在页脚注释中的间距存在问题。项目之间有一个点,但这些项目和点之间的间距不一样。所以在视觉上是不均匀的。所以点必须在那里,但间距应该是均匀的。我们查看了代码,但找不到这个间距问题。这张照片代表了问题,以直观地显示它。
除此之外,我们使用以下代码作为页脚
<footer class="footer text-center">
<div class="container">
<img src="<?= path();?>assets/images/footer-logo.png" class="footer__logo">
<p>© <?php echo date('Y');?> Bionomic B.V.</p>
<ul class="d-flex flex-wrap align-items-center justify-content-center">
<?php wp_nav_menu( array( 'container' => '', 'theme_location' => 'footer', 'items_wrap' => '%3$s') ); ?>
<li> <a href="https://www.bionomic.nl/" traget= >Home</a></li>
</ul>
</div>
</footer>
<!-- /* Footer */ -->
<a href="#" class="scrollup"></a>
</div>
<!-- /* Outer */ -->
<?php wp_footer(); ?>
<!-- Attched assets/javascripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="<?= path();?>assets/javascripts/slick.js"></script>
<script src="<?= path();?>assets/javascripts/global.js"></script>
</body>
</html>
如果有人能在代码中看到问题,那将是一个很大的帮助!
提前谢谢你!
编辑:页脚的 CSS 和 HTML 代码:
@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400;600;700&family=Open+Sans&display=swap");
@import url("fontawesome/all.css");
/**
* Set up a decent box model on the root element
*/
html
-webkit-box-sizing: border-box;
box-sizing: border-box;
/**
* Make all elements from the DOM inherit from the parent box-sizing
* Since `*` has a specificity of 0, it does not override the `html` value
* making all elements inheriting from the root box-sizing value
*/
*,
*::before,
*::after
-webkit-box-sizing: inherit;
box-sizing: inherit;
h1
font-size: 40px;
h2
font-size: 32px;
h3
font-size: 28px;
h4
font-size: 24px;
h5
font-size: 20px;
h6
font-size: 16px;
img
border: 0;
height: auto;
max-width: 100%;
/*Wordpress Image Hack*/
img.alignleft
float: left;
margin: 15px 15px 15px 0;
img.aligncenter
margin: 15px auto;
float: none;
display: block;
img.alignright
float: right;
margin: 15px 0 15px 15px;
/**
* Basic styles for links
*/
a
color: #202b59;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
a:hover, a:focus
color: #1f2955;
text-decoration: none;
outline: 0;
label
cursor: pointer;
/**
* Basic typography style for copy text
*/
body
font-family: "Open Sans", sans-serif;
font-size: 20px;
color: #666666;
line-height: 1.5;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
@media (max-width: 991px)
body
font-size: 18px;
h1, h2, h3, h4, h5, h6
color: #000;
font-family: "Baloo Chettan 2", cursive;
/**
* Clear inner floats
*/
.clear::after
content: '';
display: block;
clear: both;
/**
* Main content containers
* 1. Make the container full-width with a maximum width
* 2. Center it in the viewport
* 3. Leave some space on the edges, especially valuable on small screens
*/
.container
max-width: 1200px;
.btn
white-space: normal;
cursor: pointer;
font-size: 20px;
padding: 7px 31px 10px 30px;
border-radius: 100px;
.btn-primary
color: #fff;
background-color: #202b59;
border-color: transparent;
.btn-primary:after
content: '\f105';
font-family: 'Font Awesome 5 Pro';
margin-left: 10px;
.btn-primary.active, .btn-primary:active, .btn-primary.focus, .btn-primary:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:hover
color: #fff;
background-color: #1f2955;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active
background-color: #1f2955;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus
-webkit-box-shadow: none;
box-shadow: none;
.btn-outline-primary
color: #fff;
background-color: transparent;
border-color: #fff;
font-family: "Baloo Chettan 2", cursive;
font-weight: 700;
.btn-outline-primary::before
content: '\f061';
font-family: 'Font Awesome 5 Pro';
color: #202b59;
font-weight: 300;
margin-right: 16px;
.btn-outline-primary--reverse
color: #202b59;
border-color: #0ba3b3;
.btn-outline-primary--reverse::before
color: #0ba3b3;
.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active.focus, .btn-outline-primary.active:focus, .btn-outline-primary.active:hover, .btn-outline-primary:active.focus, .btn-outline-primary:active:focus, .btn-outline-primary:active:hover, .btn-outline-primary:hover
color: #fff;
background-color: #202b59;
border-color: #202b59;
-webkit-box-shadow: none;
box-shadow: none;
.btn-outline-primary.active::before, .btn-outline-primary:active::before, .btn-outline-primary.focus::before, .btn-outline-primary:focus::before, .btn-outline-primary.active.focus::before, .btn-outline-primary.active:focus::before, .btn-outline-primary.active:hover::before, .btn-outline-primary:active.focus::before, .btn-outline-primary:active:focus::before, .btn-outline-primary:active:hover::before, .btn-outline-primary:hover::before
color: #0ba3b3;
.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active
color: #fff;
background-color: #202b59;
border-color: #202b59;
-webkit-box-shadow: none;
box-shadow: none;
.btn-outline-primary:not([disabled]):not(.disabled).active:focus, .btn-outline-primary:not([disabled]):not(.disabled):active:focus
-webkit-box-shadow: none;
box-shadow: none;
.form-control
font-size: 20px;
background-color: #f5f5f5;
height: 48px;
border-radius: 100px;
border: none;
padding: 0 24px 0 24px;
.form-control::-webkit-input-placeholder
color: #666666;
.form-control:-moz-placeholder
color: #666666;
.form-control::-moz-placeholder
color: #666666;
.form-control:-ms-input-placeholder
color: #666666;
.form-control:focus
border: 1px solid #5cb3fd;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
.custom-select
background: url("../images/select-arrow.png") right center no-repeat;
background-size: 24px 40px;
.custom-select::-ms-expand
display: none;
.custom-select:focus
background: url("../images/select-arrow-down.png") right center no-repeat;
background-size: 24px 40px;
input[type="radio"]
width: 20px;
height: 20px;
outline: 0;
cursor: pointer;
margin: -4px 0 0 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border: 1px solid #586779;
border-radius: 100%;
position: relative;
display: inline-block;
background-color: transparent;
input[type="radio"]::before
content: '';
position: absolute;
top: 50%;
left: 50%;
background-image: none;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #586779;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
input[type="radio"]:checked::before
opacity: 1;
input[type="radio"]:disabled
cursor: not-allowed;
background-color: grey;
input[type="checkbox"]
width: 28px;
height: 28px;
outline: 0;
cursor: pointer;
margin: -4px 15px 0 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border-radius: 100px;
position: relative;
display: inline-block;
background-color: #ebebeb;
input[type="checkbox"]::before
content: '';
position: absolute;
top: 50%;
left: 50%;
background-image: none;
width: 14px;
height: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
background: #0ba3b3;
border-radius: 100px;
input[type="checkbox"]:checked
color: #fff;
input[type="checkbox"]:checked::before
opacity: 1;
input[type="checkbox"]:disabled
background-color: grey;
cursor: not-allowed;
textarea.form-control
min-height: 171px;
padding: 10px 24px 20px 24px;
border-radius: 25px;
blockquote
margin: 12px 0 12px 20px;
border-left: 10px solid #ececec;
position: relative;
padding: 30px 70px;
text-align: center;
font-size: 20px;
blockquote:before
top: 0;
left: 0;
content: '\201C';
blockquote:after
bottom: 0;
right: 0;
content: '\201D';
blockquote:before, blockquote:after
position: absolute;
width: 60px;
height: 60px;
font-size: 80px;
line-height: 1;
.wpcf7-form-control-wrap
display: block;
.wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item
margin-left: 0;
.wpcf7-form-control-wrap .wpcf7-checkbox .wpcf7-list-item.first, .wpcf7-form-control-wrap .wpcf7-radio .wpcf7-list-item.first
margin-left: 0;
.wpcf7-form-control-wrap .wpcf7-not-valid-tip
font-size: 14px;
.wpcf7-form-control-wrap .wpcf7 form.invalid .wpcf7-response-output,
.wpcf7-form-control-wrap .wpcf7 form.unaccepted
.wpcf7-response-output
font-size: 14px;
.accHeading
display: block;
cursor: pointer;
.accHeading .icn:after
font-family: 'Font Awesome 5 Pro';
content: '\f107';
.accHeading.collapsed .icn:after
content: '\f106';
/* Outer */
#outer
position: relative;
width: 100%;
min-height: 100%;
/* Tekstblok */
.tekstblok
padding-top: 62px;
padding-bottom: 54px;
.tekstblok__img
border-radius: 28px 0 28px 0;
margin-bottom: 30px;
@media (min-width: 768px)
.tekstblok__img
margin-bottom: 0;
.tekstblok__txt
padding-top: 0;
@media (min-width: 992px)
.tekstblok__txt
padding-top: 18px;
.tekstblok__txt h2
font-size: 30px;
font-weight: 600;
color: #202b59;
margin-bottom: 20px;
@media (min-width: 992px)
.tekstblok__txt h2
font-size: 40px;
margin-bottom: 40px;
.tekstblok__txt p
line-height: 1.7;
margin-bottom: 0;
/* Contact */
.contact
padding-top: 60px;
padding-bottom: 60px;
.contact h2
font-size: 34px;
color: #202b59;
font-weight: 600;
margin-bottom: 25px;
@media (min-width: 992px)
.contact h2
font-size: 40px;
margin-bottom: 41px;
.contact__left
padding-right: 25px;
@media (min-width: 1200px)
.contact__left
padding-right: 50px;
.contact__left p
line-height: 1.7;
margin-bottom: 34px;
.contact__left address
line-height: 1.7;
.contact__left__dtl
list-style: none;
padding-left: 0;
margin-bottom: 0;
.contact__left__dtl li
line-height: 1.7;
.contact__left__dtl li a
color: inherit;
.contact__left__kvk
margin-top: 20px;
margin-bottom: 34px;
.contact__left__linkedin
font-size: 20px;
color: #0ba3b3;
.contact__left__linkedin i.fab
font-size: 30px;
margin-right: 3px;
.contact__right
margin-bottom: 30px;
@media (min-width: 768px)
.contact__right
margin-bottom: 0;
.contact__right .form-group
margin-bottom: 15px;
@media (min-width: 576px)
.contact__right .wpcf7-spinner
position: absolute;
right: 15px;
margin: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
.contact__right .wpcf7-response-output
margin: 0 !important;
font-size: 14px;
border-width: 1px !important;
.contact__right label
margin-bottom: 20px;
@media (min-width: 576px)
.contact__right label
margin-bottom: 0;
.contact__right label a
color: #0ba3b3;
/* footer */
.footer
background-color: #202b59;
padding-top: 41px;
padding-bottom: 36px;
.footer__logo
margin-bottom: 51px;
.footer p
font-size: 14px;
color: #fff;
margin-bottom: 7px;
.footer ul
list-style: none;
padding-left: 0;
margin-bottom: 0;
.footer ul li
font-size: 14px;
color: #fff;
margin: 0 5px;
.footer ul li + li::before
content: '\f111';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
font-size: 3px;
color: #0ba3b3;
vertical-align: middle;
display: inline-block;
margin-top: -1px;
margin-right: 5px;
.footer ul li a
color: #fff;
a.scrollup
position: fixed;
display: none;
right: 20px;
bottom: 20px;
height: 47px;
width: 47px;
line-height: 48px;
background-color: #202b59;
color: #fff;
text-align: center;
border-radius: 50%;
margin-left: -24px;
a.scrollup:before
content: '\f062';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
color: #fff;
display: inline-block;
/* Slick Slider */
.slick-slider
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
.slick-dotted.slick-slider
margin-bottom: 30px;
.slick-list
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
.slick-list:focus
outline: none;
.slick-list.dragging
cursor: move;
cursor: grab;
cursor: -webkit-grab;
.slick-slider .slick-track,
.slick-slider .slick-list
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
.slick-track
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
.slick-track:before, .slick-track:after
content: "";
display: table;
.slick-track:after
clear: both;
.slick-loading .slick-track
visibility: hidden;
.slick-slide
float: left;
height: 100%;
min-height: 1px;
outline: 0;
display: none;
[dir="rtl"] .slick-slide
float: right;
.slick-slide.slick-loading img
display: none;
.slick-slide.dragging img
pointer-events: none;
.slick-initialized .slick-slide
display: block;
.slick-loading .slick-slide
visibility: hidden;
.slick-vertical .slick-slide
display: block;
height: auto;
border: 1px solid transparent;
.slick-arrow.slick-hidden
display: none;
/* Arrows */
.slick-prev,
.slick-next
position: absolute;
display: block;
font-size: 0px;
cursor: pointer;
background-color: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
z-index: 1;
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus
outline: none;
background-color: transparent;
color: transparent;
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
opacity: 1;
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
opacity: 1;
.slick-prev:before,
.slick-next:before
font-family: 'Font Awesome 5 Pro';
font-size: 30px;
line-height: 1;
color: #000;
opacity: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.slick-prev
left: -20px;
[dir="rtl"] .slick-prev
left: auto;
right: -25px;
.slick-prev:before
content: '\f053';
[dir="rtl"] .slick-prev:before
content: '';
.slick-next
right: -20px;
[dir="rtl"] .slick-next
left: -25px;
right: auto;
.slick-next:before
content: '\f054';
[dir="rtl"] .slick-next:before
content: '';
.slick-dots
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
.slick-dots li
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
cursor: pointer;
.slick-dots li button
border: 0;
background-color: transparent;
outline: none;
font-size: 0px;
color: transparent;
padding: 0;
cursor: pointer;
.slick-dots li button:hover, .slick-dots li button:focus
outline: none;
.slick-dots li button:hover:before, .slick-dots li button:focus:before
opacity: 1;
.slick-dots li button:before
content: '\f111';
font-family: 'Font Awesome 5 Pro';
font-size: 18px;
text-align: center;
color: #000;
opacity: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.slick-dots li.slick-active button:before
color: red;
opacity: 1;
content: '\f192';
/*# sourceMappingURL=theme.css.map */
<!doctype html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="utf-8" />
<meta charset="UTF-8">
<!-- Title Tag -->
<title> bionomic</title>
<!-- <<Mobile Viewport Code>> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='robots' content='noindex, nofollow' />
<link rel='dns-prefetch' href='//code.jquery.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = "baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":"concatemoji":"http:\/\/mmbeta.nl\/bionomic\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.8.2";
!function(e,a,t)var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t)var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()function c(e)var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)for(o=Array("flag","emoji"),t.supports=everything:!0,everythingExceptFlag:!0,r=0;r<o.length;r++)t.supports[o[r]]=function(e)if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e)case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])return!1(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function()t.DOMReady=!0,t.supports.everything||(n=function()t.readyCallback(),a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function()"complete"===a.readyState&&t.readyCallback())),(n=t.source||).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
</style>
<link rel='stylesheet' id='dashicons-css' href='http://mmbeta.nl/bionomic/wp-includes/css/dashicons.min.css?ver=5.8.2' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://mmbeta.nl/bionomic/wp-includes/css/admin-bar.min.css?ver=5.8.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css' href='http://mmbeta.nl/bionomic/wp-includes/css/dist/block-library/style.min.css?ver=5.8.2' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css' href='http://mmbeta.nl/bionomic/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.5.2' type='text/css' media='all' />
<script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js?ver=1.5' id='jquery-js'></script>
<link rel="https://api.w.org/" href="http://mmbeta.nl/bionomic/wp-json/" /><link rel="alternate" type="application/json" href="http://mmbeta.nl/bionomic/wp-json/wp/v2/pages/2" /><link rel="canonical" href="http://mmbeta.nl/bionomic/" />
<link rel='shortlink' href='http://mmbeta.nl/bionomic/' />
<link rel="alternate" type="application/json+oembed" href="http://mmbeta.nl/bionomic/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fmmbeta.nl%2Fbionomic%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://mmbeta.nl/bionomic/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fmmbeta.nl%2Fbionomic%2F&format=xml" />
<link rel="contents" href="http://mmbeta.nl/bionomic" />
<link rel="index" href="http://mmbeta.nl/bionomic" />
<link rel="home" href="http://mmbeta.nl/bionomic" />
<link rel='archives' title='November 2021' href='http://mmbeta.nl/bionomic/2021/11/' />
<style type="text/css" media="print">#wpadminbar display:none; </style>
<style type="text/css" media="screen">
html margin-top: 32px !important;
* html body margin-top: 32px !important;
@media screen and ( max-width: 782px )
html margin-top: 46px !important;
* html body margin-top: 46px !important;
</style>
<!-- <<Attched Stylesheets>> -->
<link rel="stylesheet" href="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/style.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="home page-template-default page page-id-2 logged-in admin-bar no-customize-support" >
<!-- \* Footer *\ -->
<footer class="footer text-center">
<div class="container">
<img src="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/assets/images/footer-logo.png" class="footer__logo">
<p>© 2021 Bionomic B.V.</p>
<ul class="d-flex flex-wrap align-items-center justify-content-center">
<li id="menu-item-50" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://mmbeta.nl/bionomic/privacy-statement/">Privacy statement</a></li>
<li id="menu-item-51" class="menu-item-last menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://mmbeta.nl/bionomic/algemene-voorwaarden/">Algemene voorwaarden</a></li>
<li> <a href="https://www.bionomic.nl/" traget= >Home</a></li>
</ul>
</div>
</footer>
<!-- /* Footer */ -->
<a href="#" class="scrollup"></a>
</div>
<!-- Attched assets/javascripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/assets/javascripts/slick.js"></script>
<script src="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/assets/javascripts/global.js"></script>
</body>
</html>
【问题讨论】:
您能否编辑您的问题并添加一个 sn-p,其中包含重现问题所需的最少 HTML、CSS 和 Javascript 代码?您可以在浏览器中查看您这边的页面源。谢谢! 帖子已使用页脚的 CSS 和 HTML 代码进行了编辑。网站的该部分不需要 Javascript。 【参考方案1】:我怀疑点是在 HTML 列表项的开头看到的常规类型的点。您正在使用无序列表<ul>
,其中包含单独的行<li>
。除非您另有说明,否则这些行的开头将是一个点。
如果...列表设置为出现in-line
,那么我认为点似乎在您的菜单项之间。
在你的 CSS 中试试这个。它将影响您网站上的所有列表。
<!-- In your CSS -->
ul
list-style:none;
或者,只影响那一个列表。给它添加一个类。
<!-- In your CSS -->
ul.no-dots
list-style:none;
<!-- Then in your HTML -->
<ul class="no-dots d-flex flex-wrap align-items-center justify-content-center">
【讨论】:
我试了一下,但是将<ul>
设置为in-line
之后只会出现点。所以它做了一些事情,但不是正确的事情。
in-line
只是表示内联列表可能会使点出现在列表项之间,因为它们并排而不是每个列表项都在新行上。所以我怀疑你的名单已经在线了。如上所述在您的 CSS 中尝试 list-style:none;
以删除点。
不幸的是,这不起作用。点之间的间距保持不均匀。我们希望保留点,但要使间距均匀。
对不起,我无法帮助 Aanhaai。我试图为你摆脱这些点。您能否在原始问题中添加屏幕截图,因为它可能对其他人有所帮助。
没问题可爱的代码抢劫,我真的很感激尝试。帖子中有一个屏幕截图,可以直观地显示问题。它位于 Photo 一词的超链接下。【参考方案2】:
要删除页脚链接前的点,请使用 CSS 代码。
footer ul
list-style:none;
【讨论】:
【参考方案3】:如果我把margin改成7px,看来问题解决了:
@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400;600;700&family=Open+Sans&display=swap");
@import url("fontawesome/all.css");
/**
* Set up a decent box model on the root element
*/
html
-webkit-box-sizing: border-box;
box-sizing: border-box;
/**
* Make all elements from the DOM inherit from the parent box-sizing
* Since `*` has a specificity of 0, it does not override the `html` value
* making all elements inheriting from the root box-sizing value
*/
*,
*::before,
*::after
-webkit-box-sizing: inherit;
box-sizing: inherit;
h1
font-size: 40px;
h2
font-size: 32px;
h3
font-size: 28px;
h4
font-size: 24px;
h5
font-size: 20px;
h6
font-size: 16px;
img
border: 0;
height: auto;
max-width: 100%;
/*Wordpress Image Hack*/
img.alignleft
float: left;
margin: 15px 15px 15px 0;
img.aligncenter
margin: 15px auto;
float: none;
display: block;
img.alignright
float: right;
margin: 15px 0 15px 15px;
/**
* Basic styles for links
*/
a
color: #202b59;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
a:hover, a:focus
color: #1f2955;
text-decoration: none;
outline: 0;
label
cursor: pointer;
/**
* Basic typography style for copy text
*/
body
font-family: "Open Sans", sans-serif;
font-size: 20px;
color: #666666;
line-height: 1.5;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
@media (max-width: 991px)
body
font-size: 18px;
h1, h2, h3, h4, h5, h6
color: #000;
font-family: "Baloo Chettan 2", cursive;
/**
* Clear inner floats
*/
.clear::after
content: '';
display: block;
clear: both;
/**
* Main content containers
* 1. Make the container full-width with a maximum width
* 2. Center it in the viewport
* 3. Leave some space on the edges, especially valuable on small screens
*/
.container
max-width: 1200px;
.btn
white-space: normal;
cursor: pointer;
font-size: 20px;
padding: 7px 31px 10px 30px;
border-radius: 100px;
.btn-primary
color: #fff;
background-color: #202b59;
border-color: transparent;
.btn-primary:after
content: '\f105';
font-family: 'Font Awesome 5 Pro';
margin-left: 10px;
.btn-primary.active, .btn-primary:active, .btn-primary.focus, .btn-primary:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:hover
color: #fff;
background-color: #1f2955;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active
background-color: #1f2955;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus
-webkit-box-shadow: none;
box-shadow: none;
.btn-outline-primary
color: #fff;
background-color: transparent;
border-color: #fff;
font-family: "Baloo Chettan 2", cursive;
font-weight: 700;
.btn-outline-primary::before
content: '\f061';
font-family: 'Font Awesome 5 Pro';
color: #202b59;
font-weight: 300;
margin-right: 16px;
.btn-outline-primary--reverse
color: #202b59;
border-color: #0ba3b3;
.btn-outline-primary--reverse::before
color: #0ba3b3;
.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active.focus, .btn-outline-primary.active:focus, .btn-outline-primary.active:hover, .btn-outline-primary:active.focus, .btn-outline-primary:active:focus, .btn-outline-primary:active:hover, .btn-outline-primary:hover
color: #fff;
background-color: #202b59;
border-color: #202b59;
-webkit-box-shadow: none;
box-shadow: none;
.btn-outline-primary.active::before, .btn-outline-primary:active::before, .btn-outline-primary.focus::before, .btn-outline-primary:focus::before, .btn-outline-primary.active.focus::before, .btn-outline-primary.active:focus::before, .btn-outline-primary.active:hover::before, .btn-outline-primary:active.focus::before, .btn-outline-primary:active:focus::before, .btn-outline-primary:active:hover::before, .btn-outline-primary:hover::before
color: #0ba3b3;
.btn-outline-primary:not([disabled]):not(.disabled).active, .btn-outline-primary:not([disabled]):not(.disabled):active
color: #fff;
background-color: #202b59;
border-color: #202b59;
-webkit-box-shadow: none;
box-shadow: none;
.btn-outline-primary:not([disabled]):not(.disabled).active:focus, .btn-outline-primary:not([disabled]):not(.disabled):active:focus
-webkit-box-shadow: none;
box-shadow: none;
.form-control
font-size: 20px;
background-color: #f5f5f5;
height: 48px;
border-radius: 100px;
border: none;
padding: 0 24px 0 24px;
.form-control::-webkit-input-placeholder
color: #666666;
.form-control:-moz-placeholder
color: #666666;
.form-control::-moz-placeholder
color: #666666;
.form-control:-ms-input-placeholder
color: #666666;
.form-control:focus
border: 1px solid #5cb3fd;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
.custom-select
background: url("../images/select-arrow.png") right center no-repeat;
background-size: 24px 40px;
.custom-select::-ms-expand
display: none;
.custom-select:focus
background: url("../images/select-arrow-down.png") right center no-repeat;
background-size: 24px 40px;
input[type="radio"]
width: 20px;
height: 20px;
outline: 0;
cursor: pointer;
margin: -4px 0 0 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border: 1px solid #586779;
border-radius: 100%;
position: relative;
display: inline-block;
background-color: transparent;
input[type="radio"]::before
content: '';
position: absolute;
top: 50%;
left: 50%;
background-image: none;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #586779;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
input[type="radio"]:checked::before
opacity: 1;
input[type="radio"]:disabled
cursor: not-allowed;
background-color: grey;
input[type="checkbox"]
width: 28px;
height: 28px;
outline: 0;
cursor: pointer;
margin: -4px 15px 0 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
border-radius: 100px;
position: relative;
display: inline-block;
background-color: #ebebeb;
input[type="checkbox"]::before
content: '';
position: absolute;
top: 50%;
left: 50%;
background-image: none;
width: 14px;
height: 14px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
background: #0ba3b3;
border-radius: 100px;
input[type="checkbox"]:checked
color: #fff;
input[type="checkbox"]:checked::before
opacity: 1;
input[type="checkbox"]:disabled
background-color: grey;
cursor: not-allowed;
textarea.form-control
min-height: 171px;
padding: 10px 24px 20px 24px;
border-radius: 25px;
blockquote
margin: 12px 0 12px 20px;
border-left: 10px solid #ececec;
position: relative;
padding: 30px 70px;
text-align: center;
font-size: 20px;
blockquote:before
top: 0;
left: 0;
content: '\201C';
blockquote:after
bottom: 0;
right: 0;
content: '\201D';
blockquote:before, blockquote:after
position: absolute;
width: 60px;
height: 60px;
font-size: 80px;
line-height: 1;
.wpcf7-form-control-wrap
display: block;
.wpcf7-form-control-wrap .wpcf7-acceptance .wpcf7-list-item
margin-left: 0;
.wpcf7-form-control-wrap .wpcf7-checkbox .wpcf7-list-item.first, .wpcf7-form-control-wrap .wpcf7-radio .wpcf7-list-item.first
margin-left: 0;
.wpcf7-form-control-wrap .wpcf7-not-valid-tip
font-size: 14px;
.wpcf7-form-control-wrap .wpcf7 form.invalid .wpcf7-response-output,
.wpcf7-form-control-wrap .wpcf7 form.unaccepted
.wpcf7-response-output
font-size: 14px;
.accHeading
display: block;
cursor: pointer;
.accHeading .icn:after
font-family: 'Font Awesome 5 Pro';
content: '\f107';
.accHeading.collapsed .icn:after
content: '\f106';
/* Outer */
#outer
position: relative;
width: 100%;
min-height: 100%;
/* Tekstblok */
.tekstblok
padding-top: 62px;
padding-bottom: 54px;
.tekstblok__img
border-radius: 28px 0 28px 0;
margin-bottom: 30px;
@media (min-width: 768px)
.tekstblok__img
margin-bottom: 0;
.tekstblok__txt
padding-top: 0;
@media (min-width: 992px)
.tekstblok__txt
padding-top: 18px;
.tekstblok__txt h2
font-size: 30px;
font-weight: 600;
color: #202b59;
margin-bottom: 20px;
@media (min-width: 992px)
.tekstblok__txt h2
font-size: 40px;
margin-bottom: 40px;
.tekstblok__txt p
line-height: 1.7;
margin-bottom: 0;
/* Contact */
.contact
padding-top: 60px;
padding-bottom: 60px;
.contact h2
font-size: 34px;
color: #202b59;
font-weight: 600;
margin-bottom: 25px;
@media (min-width: 992px)
.contact h2
font-size: 40px;
margin-bottom: 41px;
.contact__left
padding-right: 25px;
@media (min-width: 1200px)
.contact__left
padding-right: 50px;
.contact__left p
line-height: 1.7;
margin-bottom: 34px;
.contact__left address
line-height: 1.7;
.contact__left__dtl
list-style: none;
padding-left: 0;
margin-bottom: 0;
.contact__left__dtl li
line-height: 1.7;
.contact__left__dtl li a
color: inherit;
.contact__left__kvk
margin-top: 20px;
margin-bottom: 34px;
.contact__left__linkedin
font-size: 20px;
color: #0ba3b3;
.contact__left__linkedin i.fab
font-size: 30px;
margin-right: 3px;
.contact__right
margin-bottom: 30px;
@media (min-width: 768px)
.contact__right
margin-bottom: 0;
.contact__right .form-group
margin-bottom: 15px;
@media (min-width: 576px)
.contact__right .wpcf7-spinner
position: absolute;
right: 15px;
margin: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
.contact__right .wpcf7-response-output
margin: 0 !important;
font-size: 14px;
border-width: 1px !important;
.contact__right label
margin-bottom: 20px;
@media (min-width: 576px)
.contact__right label
margin-bottom: 0;
.contact__right label a
color: #0ba3b3;
/* footer */
.footer
background-color: #202b59;
padding-top: 41px;
padding-bottom: 36px;
.footer__logo
margin-bottom: 51px;
.footer p
font-size: 14px;
color: #fff;
margin-bottom: 7px;
.footer ul
list-style: none;
padding-left: 0;
margin-bottom: 0;
.footer ul li
font-size: 14px;
color: #fff;
margin: 0 5px;
.footer ul li + li::before
content: '\f111';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
font-size: 3px;
color: #0ba3b3;
vertical-align: middle;
display: inline-block;
margin-top: -1px;
margin-right: 7px;
.footer ul li a
color: #fff;
a.scrollup
position: fixed;
display: none;
right: 20px;
bottom: 20px;
height: 47px;
width: 47px;
line-height: 48px;
background-color: #202b59;
color: #fff;
text-align: center;
border-radius: 50%;
margin-left: -24px;
a.scrollup:before
content: '\f062';
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
color: #fff;
display: inline-block;
/* Slick Slider */
.slick-slider
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
.slick-dotted.slick-slider
margin-bottom: 30px;
.slick-list
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
.slick-list:focus
outline: none;
.slick-list.dragging
cursor: move;
cursor: grab;
cursor: -webkit-grab;
.slick-slider .slick-track,
.slick-slider .slick-list
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
.slick-track
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
.slick-track:before, .slick-track:after
content: "";
display: table;
.slick-track:after
clear: both;
.slick-loading .slick-track
visibility: hidden;
.slick-slide
float: left;
height: 100%;
min-height: 1px;
outline: 0;
display: none;
[dir="rtl"] .slick-slide
float: right;
.slick-slide.slick-loading img
display: none;
.slick-slide.dragging img
pointer-events: none;
.slick-initialized .slick-slide
display: block;
.slick-loading .slick-slide
visibility: hidden;
.slick-vertical .slick-slide
display: block;
height: auto;
border: 1px solid transparent;
.slick-arrow.slick-hidden
display: none;
/* Arrows */
.slick-prev,
.slick-next
position: absolute;
display: block;
font-size: 0px;
cursor: pointer;
background-color: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
z-index: 1;
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus
outline: none;
background-color: transparent;
color: transparent;
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
opacity: 1;
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
opacity: 1;
.slick-prev:before,
.slick-next:before
font-family: 'Font Awesome 5 Pro';
font-size: 30px;
line-height: 1;
color: #000;
opacity: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.slick-prev
left: -20px;
[dir="rtl"] .slick-prev
left: auto;
right: -25px;
.slick-prev:before
content: '\f053';
[dir="rtl"] .slick-prev:before
content: '';
.slick-next
right: -20px;
[dir="rtl"] .slick-next
left: -25px;
right: auto;
.slick-next:before
content: '\f054';
[dir="rtl"] .slick-next:before
content: '';
.slick-dots
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
.slick-dots li
position: relative;
display: inline-block;
margin: 0 5px;
padding: 0;
cursor: pointer;
.slick-dots li button
border: 0;
background-color: transparent;
outline: none;
font-size: 0px;
color: transparent;
padding: 0;
cursor: pointer;
.slick-dots li button:hover, .slick-dots li button:focus
outline: none;
.slick-dots li button:hover:before, .slick-dots li button:focus:before
opacity: 1;
.slick-dots li button:before
content: '\f111';
font-family: 'Font Awesome 5 Pro';
font-size: 18px;
text-align: center;
color: #000;
opacity: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.slick-dots li.slick-active button:before
color: red;
opacity: 1;
content: '\f192';
/*# sourceMappingURL=theme.css.map */
<!doctype html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="utf-8" />
<meta charset="UTF-8">
<!-- Title Tag -->
<title> bionomic</title>
<!-- <<Mobile Viewport Code>> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='robots' content='noindex, nofollow' />
<link rel='dns-prefetch' href='//code.jquery.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = "baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.1.0\/svg\/","svgExt":".svg","source":"concatemoji":"http:\/\/mmbeta.nl\/bionomic\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.8.2";
!function(e,a,t)var n,r,o,i=a.createElement("canvas"),p=i.getContext&&i.getContext("2d");function s(e,t)var a=String.fromCharCode;p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,e),0,0);e=i.toDataURL();return p.clearRect(0,0,i.width,i.height),p.fillText(a.apply(this,t),0,0),e===i.toDataURL()function c(e)var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)for(o=Array("flag","emoji"),t.supports=everything:!0,everythingExceptFlag:!0,r=0;r<o.length;r++)t.supports[o[r]]=function(e)if(!p||!p.fillText)return!1;switch(p.textBaseline="top",p.font="600 32px Arial",e)case"flag":return s([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])?!1:!s([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!s([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]);case"emoji":return!s([10084,65039,8205,55357,56613],[10084,65039,8203,55357,56613])return!1(o[r]),t.supports.everything=t.supports.everything&&t.supports[o[r]],"flag"!==o[r]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[o[r]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function()t.DOMReady=!0,t.supports.everything||(n=function()t.readyCallback(),a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function()"complete"===a.readyState&&t.readyCallback())),(n=t.source||).concatemoji?c(n.concatemoji):n.wpemoji&&n.twemoji&&(c(n.twemoji),c(n.wpemoji)))(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
</style>
<link rel='stylesheet' id='dashicons-css' href='http://mmbeta.nl/bionomic/wp-includes/css/dashicons.min.css?ver=5.8.2' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://mmbeta.nl/bionomic/wp-includes/css/admin-bar.min.css?ver=5.8.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css' href='http://mmbeta.nl/bionomic/wp-includes/css/dist/block-library/style.min.css?ver=5.8.2' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css' href='http://mmbeta.nl/bionomic/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.5.2' type='text/css' media='all' />
<script type='text/javascript' src='https://code.jquery.com/jquery-3.3.1.min.js?ver=1.5' id='jquery-js'></script>
<link rel="https://api.w.org/" href="http://mmbeta.nl/bionomic/wp-json/" /><link rel="alternate" type="application/json" href="http://mmbeta.nl/bionomic/wp-json/wp/v2/pages/2" /><link rel="canonical" href="http://mmbeta.nl/bionomic/" />
<link rel='shortlink' href='http://mmbeta.nl/bionomic/' />
<link rel="alternate" type="application/json+oembed" href="http://mmbeta.nl/bionomic/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fmmbeta.nl%2Fbionomic%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://mmbeta.nl/bionomic/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fmmbeta.nl%2Fbionomic%2F&format=xml" />
<link rel="contents" href="http://mmbeta.nl/bionomic" />
<link rel="index" href="http://mmbeta.nl/bionomic" />
<link rel="home" href="http://mmbeta.nl/bionomic" />
<link rel='archives' title='November 2021' href='http://mmbeta.nl/bionomic/2021/11/' />
<style type="text/css" media="print">#wpadminbar display:none; </style>
<style type="text/css" media="screen">
html margin-top: 32px !important;
* html body margin-top: 32px !important;
@media screen and ( max-width: 782px )
html margin-top: 46px !important;
* html body margin-top: 46px !important;
</style>
<!-- <<Attched Stylesheets>> -->
<link rel="stylesheet" href="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/style.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="home page-template-default page page-id-2 logged-in admin-bar no-customize-support" >
<!-- \* Footer *\ -->
<footer class="footer text-center">
<div class="container">
<img src="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/assets/images/footer-logo.png" class="footer__logo">
<p>© 2021 Bionomic B.V.</p>
<ul class="d-flex flex-wrap align-items-center justify-content-center">
<li id="menu-item-50" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://mmbeta.nl/bionomic/privacy-statement/">Privacy statement</a></li>
<li id="menu-item-51" class="menu-item-last menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://mmbeta.nl/bionomic/algemene-voorwaarden/">Algemene voorwaarden</a></li>
<li> <a href="https://www.bionomic.nl/" traget= >Home</a></li>
</ul>
</div>
</footer>
<!-- /* Footer */ -->
<a href="#" class="scrollup"></a>
</div>
<!-- Attched assets/javascripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/assets/javascripts/slick.js"></script>
<script src="http://mmbeta.nl/bionomic/wp-content/themes/meijermedia/assets/javascripts/global.js"></script>
</body>
</html>
【讨论】:
这解决了问题。谢谢! @Aanhaai 不客气!以上是关于网站设计的页脚注释中的间距不均匀的主要内容,如果未能解决你的问题,请参考以下文章
在 Wordpress 中将 Mailchimp 表单实现到我的页脚时,100% 宽度不起作用