【发布时间】:2021-10-10 10:58:32
【问题描述】:
我有一页有两列。在左边我有一个表格,在右边我只有文本。我需要做的是将文本与表单标签对齐。
我尝试通过调整行高、填充和边距来做到这一点,但它在 chrome 中看起来很好,但在其他浏览器中完全关闭。有什么建议吗?
这是它现在的样子:
<head>
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<style>
@media (min-width: 1000px) and (max-width: 1215px) {
h1{
font-size:1.4rem !important;
}
p{
font-size:1.1rem !important;
}
}
@media (min-width: 1216px) and (max-width: 1407px){
h1{
font-size:1.6rem !important;
}
p{
font-size:1.15rem !important;
}
}
@media(min-width: 1408px) {
h1{
font-size:1.7rem !important;
}
p{
font-size:1.2rem !important;
}
}
</style>
</head>
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns is-8 is-variable ">
<div class="column is-half-desktop is-full-mobile has-text-left">
<div id="mc_embed_signup">
<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group field">
<label class="label has-text-weight-bold" for="mce-EMAIL" dir="rtl" style="text-align: right;">البريد الإلكتروني <span class="asterisk">*</span>
</label>
<div class="control">
<input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
</div>
</div>
<div class="mc-field-group field">
<label class="label has-text-weight-bold" for="mce-FNAME" dir="rtl" style="text-align: right;">الاسم الاول</label>
<div class="control">
<input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
</div>
</div>
<div class="mc-field-group field">
<label class="label has-text-weight-bold" for="mce-LNAME" dir="rtl" style="text-align: right;">اسم العائلة </label>
<div class="control">
<input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="column is-half-desktop has-text-right">
<br>
<p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. </p><br>
<p class="has-text-justified" dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p><br>
<p class="has-text-justified" dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p><br>
</div>
</div>
</section>
【问题讨论】:
标签: html css forms styles bulma