मेरे यहां एक मिनी प्रोजेक्ट है। जब मैं शरीर में text-align: center; करने का प्रयास करता हूं, तो चिह्न अनुसरण नहीं करते हैं। यदि मैं .Content-label i css में left: 0; को हटा दूं, तो यह दाईं ओर रहता है और मुझे कोई सुराग नहीं है कि इसे बाईं ओर कैसे रखा जाए।

अधिक जानकारी के लिए कृपया मेरा कोड जांचें। https://jsfiddle.net/Foxseiz/zse8tuL9/2/

1
Foxseiz 30 पद 2019, 10:41

2 जवाब

सामग्री-लेबल को direction: rtl; पर सेट करें और left: 0; को हटा दें

0
amir hossein 30 पद 2019, 07:49

आप फ्लेक्सबॉक्स का उपयोग कर सकते हैं। आप अपने content-label को flex एलिमेंट और सेंटर के रूप में justify-content प्रॉपर्टी के साथ सेट कर सकते हैं। एन.बी. मैंने order संपत्ति का उपयोग किया क्योंकि आपने इनपुट के बाद i टैग सेट किया है, इसलिए मैं ऑर्डर बदलता हूं।

/* CSS files add styling rules to your content */
body {
  font-family: verdana, arial, sans-serif !important;
  margin: auto;
  max-width: 800px;
  margin-top: 50px;
  text-align: center;
}

input[type="text"] {
  width: 180px;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

input[type="text"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.content-label input[type="text"] {
  padding-left: 50px;
  order:2;
  
}

.content-label {
  position: relative;
  display:flex; /* add this */
  justify-content:center; /* add this */
}

.content-label i {
  /*position: absolute;
  left: 0;
  top: 8px;*/ /* comment this */
  margin: 9px 0 8px 8px;
  color: #aaa;
  transition: 0.3s;
  order:1;
}

.content-label input[type="text"]:focus + i {
  color: dodgerBlue;
}

.content-label.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 8px;
  border-radius: 4px 0 0 4px;
  line-height: inherit !important;
  width: 40px;
  text-align: center;
}

.content-label.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
    <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
    <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
    <script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="full-content">
      
      <div id="content">
        
        <form autocomplete="off">
          <div class="content-label inputIconBg">
            <input type="text" id="cost" placeholder="Cost"/>
            <i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
          </div>
        
          <div class="content-label inputIconBg">
            <input type="text" id="margin" value="1.4" placeholder="Margin"/>
            <i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
          </div>

          <div class="content-label inputIconBg">
            <input type="text" id="labor" value="35" placeholder="Labor"/>
            <i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
          </div>

          <div class="content-label inputIconBg">
            <input type="text" id="shipping" value="15" placeholder="Shipping"/>
            <i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
          </div>
        </form>
        
        <button id="calc" onclick="calculate()">Calculate</button>
      </div>
      
      <p id="result"></p>

    </div>
  </body>
</html>
1
Sfili_81 30 पद 2019, 07:50