एक पृष्ठ पर, मैं उप-अनुभाग जोड़ने का प्रयास कर रहा हूं जहां आप टेक्स्ट बॉक्स के साथ एक शीर्षक जोड़ सकते हैं, और यह केंद्रित होना चाहिए।

यह इस तरह दिखता है:

enter image description here

एचटीएमएल

<div id="subsections">
   <div class="subsection">
      <div class="subsection-header"><input type="text" class="subsection-title"></div>
      <div class="subsection-right"><button class="iqsp-button-small red delete-section">X</button></div>
      <div class="subsection-content"></div>
   </div>
</div>

सीएसएस

.subsection {
    position: relative;
    background-color: #006eaf;
    min-height: 50px;
    margin-bottom: 10px;
}
.subsection-header {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.subsection-right {
    position: absolute;
    right: 0px;
}

अब यह सब बढ़िया है, यह इरादा के अनुसार काम करता है। हालाँकि, मेरा अगला कदम प्रश्न बनाने के लिए नीचे एक तालिका जोड़ना है:

एचटीएमएल

.subsection {
  position: relative;
  background-color: #006eaf;
  min-height: 50px;
  margin-bottom: 10px;
}

.subsection-header {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.subsection-right {
  position: absolute;
  right: 0px;
}
<div id="subsections">
  <div class="subsection">
    <div class="subsection-header"><input type="text" class="subsection-title"></div>
    <div class="subsection-right"><button class="iqsp-button-small red delete-section">X</button></div>
    <div class="subsection-content">
      <table class="responstable">
        <tbody>
          <tr>
            <th>No.</th>
            <th>Question</th>
            <th>Score</th>
            <th>Mandatory</th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

यह वह जगह है जहाँ यह सब गड़बड़ हो जाता है, और ऐसा दिखता है: यहां छवि विवरण दर्ज करें

मैं देख सकता हूं कि क्या हो रहा है, पदों के पूर्ण होने के साथ कुछ करना है, और फिर तालिका उसी स्थिति से शुरू हो रही है, इसलिए यह बस ओवरलैप हो जाती है।

क्या कोई सीएसएस है जिसे मैं .subsection-content या कहीं भी जोड़ सकता हूं, ताकि इसे अगली पंक्ति में शुरू किया जा सके ताकि बोलने के लिए?

1
ThePerplexedOne 2 अप्रैल 2020, 12:15
मैंने आपको एक स्निपेट बनाया है - एक न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण हमेशा एक अच्छा विचार है - स्निपेट आपकी छवि की तरह नहीं दिखता है
 – 
mplungjan
2 अप्रैल 2020, 12:21
आपके पहले स्क्रीनशॉट में; क्या तालिका नीले बटन के नीचे दिखाई देनी चाहिए?
 – 
cfreear
2 अप्रैल 2020, 12:28
वेबपेजों को बिछाने के लिए एब्सोल्यूट पोजिशनिंग बहुत खराब तरीका है। यह बेहद लचीला है और बहुत बेहतर और अधिक प्रतिक्रियाशील विकल्प हैं। देखें LearnLayout.com
 – 
Paulie_D
2 अप्रैल 2020, 12:37

2 जवाब

यहां आपकी आवश्यकताएं हैं

.subsection {
  position: relative;
  background-color: dodgerblue;
  min-height: 50px;
  margin-bottom: 10px;
}

.subsection-header {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.subsection-right {
  position: absolute;
  right: 0px;
}

.subsection-content {
  position: absolute;
  left: 0px;
  top: 100%;
}

.responstable {
  width: 100vw;
  text-align: center;
}
<div id="subsections">
  <div class="subsection">
    <div class="subsection-header"><label for="header">Header : </label><input type="text" class="subsection-title" id="header"></div>
    <div class="subsection-right"><button class="iqsp-button-small red delete-section">X</button></div>
    <div class="subsection-content">
      <table class="responstable">
        <tbody>
          <tr>
            <th>No.</th>
            <th>Question</th>
            <th>Score</th>
            <th>Mandatory</th>
          </tr>
          <tr>
            <td>1</td>
            <td>50</td>
            <td>40</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
0
Sandeep Dalal 2 अप्रैल 2020, 13:10
खैर, यह काम करता है, लेकिन अब उसके नीचे सब कुछ एक ही लाइन पर है।
 – 
ThePerplexedOne
2 अप्रैल 2020, 14:06

आप हेडर के लिए एक दृष्टिकोण का उपयोग कर रहे हैं जो इसे क्षैतिज और लंबवत दोनों उपखंड के अंदर केंद्रित करेगा।

बाद में वास्तव में सुविधाजनक नहीं है जब तालिका उपखंड के अंदर भी हो।

आइए इसे ठीक करें, केवल क्षैतिज रूप से केंद्रित करें, और इसे शीर्ष पर कुछ स्थान दें

.subsection {
  position: relative;
  background-color: #006eaf;
  min-height: 50px;
  margin-bottom: 10px;
}

.subsection-header {
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  top: 10px;
  margin-bottom: 30px;
}

.subsection-right {
  position: absolute;
  right: 0px;
  top: 0px;
}
<div id="subsections">
  <div class="subsection">
    <div class="subsection-header"><input type="text" class="subsection-title"></div>
    <div class="subsection-right"><button class="iqsp-button-small red delete-section">X</button></div>
    <div class="subsection-content">
      <table class="responstable">
        <tbody>
          <tr>
            <th>No.</th>
            <th>Question</th>
            <th>Score</th>
            <th>Mandatory</th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
0
vals 2 अप्रैल 2020, 14:51