个人中心
gpt4 book ai didi

html - 似乎无法正确定位我的位置。 CSS

转载 作者：太空宇宙 更新时间：2023-11-04 01:16:33 25 4
gpt4 key购买 nike

我正在制作一个作品集网站作为我的第一个编程元素，但我在定位方面遇到了一些麻烦。我在顶部有 2 个元素，我想放在中间但有点偏离，而且我的网页分为两列，但第二列由于某种原因并没有真正完全排列。

更具体地说，顶部有一个箭头，它应该位于页面的中心(水平)，带有“主页”边框的文本也应该居中。

并且在右栏中，“联系表单”的标题与联系表单的左侧不对齐，提交按钮也不对齐。

另外，如何才能使表单中输入字段的边框在被选中时不会改变颜色。

Here is the JSFiddle for this谢谢，非常感谢。

我的 HTML(它实际上是一个 PHP 文件，因为它有一个联系表单，但主要是 html):

<!DOCTYPE html>
<?php include ('form_process.php');?>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/contact.css">
    <title>Contact</title>
</head>
<body>
    <div class="container-fluid top email">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
        <p class="homepage">Home Page</p>
        <div class="email_form">  
            <div class="row">


            </div>
            <div class="row">
                <div class="left col-sm-4 col-sm-offset-1 hidden-xs">
                    <h3>Contact Me</h3>
                    <p class="">If you want to get in touch with me, I'd love to talk! Feel free to use the contact form to the right, or contact me on social media.</p>
                    <p>mail: myemail@gmail.com</p>
                    <h3>Find Me On</h3>
                    <p>facebook twitter instagram</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ullam, veritatis quo. Voluptate, nihil odio cum. Voluptas ipsam, sit accusantium rem perferendis, voluptatibus obcaecati quisquam adipisci eum, id dignissimos aliquam non. Sequi culpa, modi quod, repellendus, doloribus incidunt excepturi fugiat aperiam totam quos provident voluptatibus aliquid voluptate repellat at suscipit vel dicta alias? Sint accusantium nihil qui sit voluptates assumenda suscipit quod nulla asperiores tempora, modi eaque quis non expedita odit ipsum, illo ad praesentium labore! Fugiat officiis natus suscipit. Architecto aut neque minima dolorum iste saepe totam voluptas earum, tempora fugit ullam harum velit debitis maxime provident. Recusandae, aliquam.</p>
                </div>
                <div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-2">
                    <form id="contact" action="<?= $_SERVER['PHP_SELF'];?>" method="post">
                        <h3>Contact Form</h3>
                        <div class="form-group row">

                            <div>
                                <label for="name">Name*</label>
                                <input class="form-control input-default" id="name" placeholder="Your Full Name" type="text" tabindex="1" size="30" name="name" value="<?= $name ?>" autofocus>
                                <span class="error"><?= $name_error?> </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div >
                                <label for="email">Email Address*</label> 
                                <input class="form-control input-default" id="email" placeholder="Your Email Address" type="text" name="email" value="<?= $email ?>" tabindex="2" >
                                <span class="error"><?= $email_error?> </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div >
                                <label for="subject">Subject*</label> 
                                <input class="form-control input-default" id="subject" placeholder="Your Subject" type="text" name="subject" value="<?= $subject ?>" tabindex="2" >
                                <span class="error"><?= $subject_error?> </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div >
                                <label for="message">Message*</label>
                                <textarea placeholder="Type your Message Here...." class="message1 form-control input-default" rows="5" id="message" name="message" tabindex="5" ><?php if(isset($_POST['message'])){ 
                                    echo htmlentities ($_POST['message']); }?></textarea>
                                    <span class="error"><?= $message_error?></span> 
                                </div>
                            </div>
                            <div>
                                <button class="btn-default btn rbutton" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                            </div> 
                            <div class="success"><?= $success;?></div>
                        </form>

                    </div>

                </div>


            </div>
        </div>
    </body>
    </html>

我的 CSS:

    body{
    background: #0ac2d2;
    overflow-x: hidden;
}
label, p{
    color: white;
}
.input-default, .input-default:after, .inpute-default:visited{
    border: 2px solid white;
    background-color: #0ac2d2;
}
.email_form{
    margin-top: 25px;
}
h3{
    font-weight: bold;
    color: #E06B65;
}
.back_button{
    margin-top: 20px;
    text-align: center;
    display: inline-block;
    margin-left: 50%; 
    margin-right: 50%; 
    font-size: 28px;
    color: white;
    padding: 0;
    transition: transform .5s;

}

.back_button:hover{
    text-decoration: none;
    color:white;
    transform: translateY(-20px);
}
.homepage{
    font-size: 16px;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    margin-left: 50%;
    margin-right: 50%;
    border: solid 1px;
    padding-left: 5px;
    padding-right: 5px;
}

最佳答案

稍微尝试一下，除了一个问题元素之外，我删除了所有元素，剩下的 html 几乎只有这个:

<body>
    <p class="homepage">Home Page</p>
</body>

这有助于隔离它。伟大的。但是，仍然向右偏移。

查看 CSS，问题似乎出在 margin-left 和 margin-right 上:

margin-left: 50%;
margin-right: 50%;

这不是使文本居中的好方法，因为您已经使边距占据了宽度的 100%。它将开始在左边距的右侧绘制文本，这意味着在页面的正中间，并继续向右绘制，使其偏离中心。

可能还有另一种方法可以使它居中。也许把它包在另一排，让 bootstrap 处理它？这意味着在您的 CSS 中去掉 .back-button 和 .homepage 上的 margin-left 和 margin-right，并将其用于 html 中的那些元素:

<div class="row">
  <div class="text-center">
        <a  href="hamburger.html" class="fa fa-arrow-up back_button" ></a>
  </div>
</div>
<div class="row">
  <div class="text-center">
        <p class="homepage">Home Page</p>
  </div>
</div>

您应该能够通过类似的故障排除来想出解决其他对齐问题的方法(看起来在我输入的时间里至少有一个其他答案，呵呵)。

关于html - 似乎无法正确定位我的位置。 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50032837/

25 4 0
文章推荐： 追加函数中的 C 指针不更新头尾的值
文章推荐： python - 检查矩阵是否在字典列表中
文章推荐： c - 使用主入口点将 HINSTANCE 传递给 WNDCLASS
文章推荐： python - 如何将集合中的元素与多个字典条目相关联
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com